1 概述
编写后台网站程序大多数用到文件上传，可是传统的文件上传控件不是外观不够优雅，就是性能不太好看，翻阅众多文件上传控件的文章，发现可以这样去定义一个文件上传控件，实现的文件上传的效果图如下：
2、该图片上传插件实现功能如下：
1>能够异步上传，上传成功之后，服务器返回响应结果；能够定义上传前和上传后自定义处理方式；
2>能够实现文件格式判断，过滤非图片文件；
3>服务端能够过滤重复上传的图片；
3、页面代码分析:
1>、Jquery图片上传插件代码如下：
// 选中文件, 提交表单(开始上传)
(function ($) {
var iframe;
var form;
var opeartData=null; $.uploadDefault = {
url: '',
fileName: 'filedata',
dataType: 'json',
imgshow: '',
onSend: function(){ return true; },
onSubmit: function () { return true; },
onComplate: function () { return true; }
}; $.UpLoadForm = { //图片格式验证
$PicChange: function (obj)
{
if (opeartData.imgshow != null && opeartData.imgshow != '')
{
$("#" + opeartData.imgshow).val($(obj).val());
}
}, //判断pic格式是否正确
$IsPicCheck: function (fileName)
{
if (fileName != null && fileName != "") {
//lastIndexOf如果没有搜索到则返回为-1
if (fileName.lastIndexOf(".") != -) {
var fileType = (fileName.substring(fileName.lastIndexOf(".") + , fileName.length)).toLowerCase();
var suppotFile = new Array();
suppotFile[] = "jpg";
suppotFile[] = "gif";
suppotFile[] = "bmp";
suppotFile[] = "png";
suppotFile[] = "jpeg";
for (var i = ; i < suppotFile.length; i++) {
if (suppotFile[i] == fileType) {
return true;
} else {
continue;
}
}
return false;
} else {
return false;
}
}
}, $ImgUpLoad: function () {
if (opeartData == null)
{
//没有选择图片或者图片已经上传
return;
}
opeartData = $.extend($.uploadDefault, opeartData);
var canSend = opeartData.onSend();
if (!canSend) {
return;
}
if (!opeartData.onSubmit())//图片验证
{
return;
}
form.submit();
iframe.load(function() {
var contents = $(this).contents().get();
var data = $(contents).find('body').text();
if ('json' == opeartData.dataType) {
data = window.eval('(' + data + ')');
}
opeartData.onComplate(data);
setTimeout(function() {
iframe.remove();
form.remove();
opeartData = null;
}, );
});
}, $OpenFIle: function (options) {
opeartData = $.extend($.uploadDefault, options);
if (opeartData.url == '') {
return;
}
var frameName = 'upload_frame_0';
var formName = 'upload_form_0';
if ($("#" + formName).length > ) {
iframe = $("#" + frameName);
form = $("#" + formName);
}
else {
iframe = $('<iframe style="position:absolute;top:-9999px" id="' + frameName + '" />').attr('name', frameName);
form = $('<form method="post" style="display:none;" id="' + formName + '" enctype="multipart/form-data" />').attr('name', 'form_' + frameName);
form.attr("target", frameName).attr('action', opeartData.url);
// form中增加数据域
var formHtml = '<input type="file" name="' + opeartData.fileName + '" onchange="$.UpLoadForm.$PicChange(this)")"/>';
form.append(formHtml);
iframe.appendTo("body");
form.appendTo("body");
}
var fileInput = $('input[type=file][name=' + opeartData.fileName + ']', form);
fileInput.click();
}
}
})(jQuery);
2>前台页面调用代码如下，Jquery插件，别忘记引入Jquery对应js：
<script type="text/javascript">
$(function () {
$("#imagetx").bind("click", function () {
$.UpLoadForm.$OpenFIle({
// 上传地址
url: '../upload/UploadImg',
// 文件域名字
fileName: 'upimage',
// 其他表单数据
imgshow: 'imagetx',
// 上传完成后, 返回json, text
dataType: 'json',
// 上传之前回调,return true表示可继续上传
onSend: function () {
$.ShowLoadDialog();
return true;
},
onSubmit: function () {
var picpath = $("#imagetx").val();
console.log(picpath);
if (!$.UpLoadForm.$IsPicCheck(picpath))
{
$.ShowLoadDialogClose();
$TipDialog("图片上传", "请上传jpg、gif、bmp、png、jpeg格式的图片！");
return false;
}
return true;
},
// 上传之后回调
onComplate: function (data) {
$.ShowLoadDialogClose();
if (data != null)
{
console.log(data)
if (data.errorcode == "") {
$("#showpic").attr("src", data.picurl);
}
else {
$TipDialog("图片上传", "图片上传失败");
}
}
}
});
});
$("#btnupload").bind("click", function () {
$.UpLoadForm.$ImgUpLoad();
}) });
</script>
3>后台服务器验证：
[HttpPost]
public JsonResult UploadImg(HttpPostedFileBase upimage)
{
string pic = "", error = "",pcode="";
try
{
if (upimage != null)
{
string fileName = DateTime.Now.ToString("yyyyMMdd") + System.IO.Path.GetFileName(upimage.FileName);
string[] pictext = { ".jpg",".gif",".bmp",".png",".jpeg" };
string extenname= System.IO.Path.GetExtension(fileName);
if (pictext.Contains(extenname))
{
string filePhysicalPath = Server.MapPath("~/Upload/Images/" + fileName);
upimage.SaveAs(filePhysicalPath);
pic = "/Upload/Images/" + fileName;
}
else
{
error = "";
pic =pic ;
}
}
}
}
catch (Exception ex)
{
error = ex.Message;
}
return Json(new
{
errorcode = error,
picurl = pic,
piccode = pcode
});
}
图片上传也就完成，展示的效果也如上面所示；