Asp.net MVC中使用JQuery插件ajaxFileUpload上传文件

ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件，使用过程中发现很多与这个同名的，基于原始版本基础之上修改过的插件，文件版本比较多，我把我自己使用的ajaxFileUpload文件上传到博客园上了，想要使用的朋友可以下载：ajaxfileupload.rar。

整个插件源码不到200行，实现非常简单，大致原理就是通过js动态创建隐藏的表单，然后进行提交操作，达到附件上传的目的，主要实现在源码里都有注释，不难理解，我们也可以基于此简单版本实现更复杂的操作。

1 ajaxFileUpload使用说明

ajaxFileUpload的使用也很简单，调用ajaxFileUpload方法即可，各配置项详细说明如下：

$.ajaxFileUpload({

type: "post", //请求类型：post或get,当要使用data提交自定义参数时一定要设置为post

url: "/Shared/Upload", //文件上传的服务器端请求地址

secureuri: false, //是否启用安全提交，一般默认为false就行，不用特殊处理

fileElementId: "filePicture",

//文件上传控件的id <input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" />

dataType: "json", //返回值类型，一般设置为json，还支持html\\xml\\script类型

data: { "id": "1", "name": "test" }, //用于post请求提交自定义参数

success: function (data, status) { //服务器成功响应处理函数

},

error: function (data, status, e) { //服务器响应失败处理函数

}

});

首先在页面添加对JQuery及ajaxFileUpload的引用，这里的JQuery用的2.1.4版本，经测试用各个版本基本没什么影响。
<script src="../../Content/js/jquery-2.1.4.min.js"></script>
<script src="../../Content/js/ajaxfileupload.js"></script>
页面添加类型为file的input标签

复制代码代码如下:

<input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" onchange="filePictureChange()" />

通过accept可以限定打开文件选择对话框后，默认能选择的文件类型。文件类型的定义主要有以下这些

*.3gpp audio/3gpp， video/3gpp 3GPP Audio/Video

*.ac3 audio/ac3 AC3 Audio

*.asf allpication/vnd.ms-asf Advanced Streaming Format

*.au audio/basic AU Audio

*.css text/css Cascading Style Sheets

*.csv text/csv Comma Separated Values

*.doc application/msword MS Word Document

*.dot application/msword MS Word Template

*.dtd application/xml-dtd Document Type Definition

*.dwg image/vnd.dwg AutoCAD Drawing Database

*.dxf image/vnd.dxf AutoCAD Drawing Interchange Format

*.gif image/gif Graphic Interchange Format

*.htm text/html HyperText Markup Language

*.html text/html HyperText Markup Language

*.jp2 image/jp2 JPEG-2000

*.jpe image/jpeg JPEG

*.jpeg image/jpeg JPEG

*.jpg image/jpeg JPEG

*.js text/javascript， application/javascript JavaScript

*.json application/json JavaScript Object Notation

*.mp2 audio/mpeg， video/mpeg MPEG Audio/Video Stream， Layer II

*.mp3 audio/mpeg MPEG Audio Stream， Layer III

*.mp4 audio/mp4， video/mp4 MPEG-4 Audio/Video

*.mpeg video/mpeg MPEG Video Stream， Layer II

*.mpg video/mpeg MPEG Video Stream， Layer II

*.mpp application/vnd.ms-project MS Project Project

*.ogg application/ogg， audio/ogg Ogg Vorbis

*.pdf application/pdf Portable Document Format

*.png image/png Portable Network Graphics

*.pot application/vnd.ms-powerpoint MS PowerPoint Template

*.pps application/vnd.ms-powerpoint MS PowerPoint Slideshow

*.ppt application/vnd.ms-powerpoint MS PowerPoint Presentation

*.rtf application/rtf， text/rtf Rich Text Format

*.svf image/vnd.svf Simple Vector Format

*.tif image/tiff Tagged Image Format File

*.tiff image/tiff Tagged Image Format File

*.txt text/plain Plain Text

*.wdb application/vnd.ms-works MS Works Database

*.wps application/vnd.ms-works Works Text Document

*.xhtml application/xhtml+xml Extensible HyperText Markup Language

*.xlc application/vnd.ms-excel MS Excel Chart

*.xlm application/vnd.ms-excel MS Excel Macro

*.xls application/vnd.ms-excel MS Excel Spreadsheet

*.xlt application/vnd.ms-excel MS Excel Template

*.xlw application/vnd.ms-excel MS Excel Workspace

*.xml text/xml， application/xml Extensible Markup Language

*.zip aplication/zip Compressed Archive

我这里没有单独放上传按钮，添加了onchange事件，在选择文件后立即上传文件，onchange时间定义如下。

function filePictureChange() {

$.ajaxFileUpload({

url: "/Shared/Upload", //用于文件上传的服务器端请求地址

type: "post",

secureuri: false, //一般设置为false

fileElementId: "filePicture", //文件上传空间的id属性

dataType: "json", //返回值类型一般设置为json

success: function (data, status) { //服务器成功响应处理函数

alert(data.fileName);

alert(data.filePath);

alert(data.fileSize);

},

error: function (data, status, e){ //服务器响应失败处理函数

alert(e);

}

});

};

后台控制器处理方法如下，使用MD5处理，判断文件是否已经存在，避免文件重复上传。

/// <summary>

/// 附件上传

/// </summary>

/// <returns></returns>

public ActionResult Upload()

{

HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;

if (files.Count == 0) return Json("Faild", JsonRequestBehavior.AllowGet);

MD5 md5Hasher = new MD5CryptoServiceProvider();

/*计算指定Stream对象的哈希值*/

byte[] arrbytHashValue = md5Hasher.ComputeHash(files[0].InputStream);

/*由以连字符分隔的十六进制对构成的String，其中每一对表示value中对应的元素；例如“F-2C-4A”*/

string strHashData = System.BitConverter.ToString(arrbytHashValue).Replace("-", "");

string FileEextension = Path.GetExtension(files[0].FileName);

string uploadDate = DateTime.Now.ToString("yyyyMMdd");

string virtualPath = string.Format("/Data/ComponentAttachments/{0}/{1}{2}", uploadDate, strHashData, FileEextension);

string fullFileName = Server.MapPath(virtualPath);

//创建文件夹，保存文件

string path = Path.GetDirectoryName(fullFileName);

Directory.CreateDirectory(path);

if (!System.IO.File.Exists(fullFileName))

{

files[0].SaveAs(fullFileName);

}

string fileName = files[0].FileName.Substring(files[0].FileName.LastIndexOf("\\\\") + 1, files[0].FileName.Length - files[0].FileName.LastIndexOf("\\\\") - 1);

string fileSize = GetFileSize(files[0].ContentLength);

return Json(new { FileName = fileName, FilePath = virtualPath, FileSize = fileSize }, "text/html", JsonRequestBehavior.AllowGet);

}

/// <summary>

/// 获取文件大小

/// </summary>

/// <param name="bytes"></param>

/// <returns></returns>

private string GetFileSize(long bytes)

{

long kblength = 1024;

long mbLength = 1024 * 1024;