asp.net mvc中使用jquery插件ajaxfileupload上传文件 -k8凯发

0 ajaxfileupload简介ajaxfileupload插件是一个非常简单的基于jquery的异步上传文件的插件，使用过程中发现很多与这个同名的，基于原始版本基础之上修改过的插件，文件版本比较多，我把我自己使用的ajaxfileupload文件上传到博客园上了，想要使用的朋友可以下载：http://xiazai。
jb51。net/201611/yuanma/ajaxfileupload(jb51。net)。rar。整个插件源码不到200行，实现非常简单，大致原理就是通过js动态创建隐藏的表单，然后进行提交操作，达到附件上传的目的，主要实现在源码里都有注释，不难理解，我们也可以基于此简单版本实现更复杂的操作。
1 ajaxfileupload使用说明ajaxfileupload的使用也很简单，调用ajaxfileupload方法即可，各配置项详细说明如下：$。ajaxfileupload({ type: “post”, //请求类型：post或get,当要使用data提交自定义参数时一定要设置为post url: “/shared/upload”, //文件上传的服务器端请求地址 secureuri: false, //是否启用安全提交，一般默认为false就行，不用特殊处理 fileelementid: “filepicture”, //文件上传控件的id 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版本，经测试用各个版本基本没什么影响。


页面添加类型为file的input标签
代码如下: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处理，判断文件是否已经存在，避免文件重复上传。
///

/// 附件上传 ///

/// 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); } ///

/// 获取文件大小 ///

/// /// private string getfilesize(long bytes) { long kblength = 1024; long mblength = 1024 * 1024; if (bytes < kblength) return bytes。
tostring() “b”; if (bytes < mblength) return decimal。round(decimal。divide(bytes, kblength), 2)。tostring() “kb”; else return decimal。
round(decimal。divide(bytes, mblength), 2)。tostring() “mb”; }2 ajaxfileupload使用过程中的一些问题
2。0 jquery。handleerror is not a function解决方法：
经测试handlererror只在jquery-1。
4。2之前的版本中存在，以后版本中都没有这个函数了，因此在将handleerror这个函数复制到ajaxfileupload。js中，就行了uploadhttpdata: function (r, type) { var data = !type; data = type == “xml” || data ? r。
responsexml : r。responsetext; // if the type is “script”, eval it in global context if (type == “script”) jquery。globaleval(data); // get the javascript object, if json is used。
if (type == “json”) eval(“data = ” data); //eval(“data = \”” data “\””); // evaluate scripts within html if (type == “html”) jquery(“