ajaxFileUpload简介
ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件，使用过程中发现很多与这个同名的，基于原始版本基础之上修改过的插件，文件版本比较多，我把我自己使用的ajaxFileUpload文件上传上了，想要使用的朋友可以下载：/download/weixin_43951530/81133954。
ajaxFileUpload使用说明：
ajaxFileUpload的使用也很简单，调用ajaxFileUpload方法即可，各配置项详细说明如下：
$.ajaxFileUpload({type: "post", //请求类型：post或get,当要使用data提交自定义参数时一定要设置为posturl: "/Shared/Upload",//文件上传的服务器端请求地址secureuri: false,//是否启用安全提交，一般默认为false就行，不用特殊处理fileElementId: "filePicture", //文件上传控件的id <input type="file" id="filePicture" name="filePicture" accept=".jpg,.jpeg,.png,.bmp" οnchange="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可以限定打开文件选择对话框后，默认能选择的文件类型。
ajaxFileUpload使用过程中的一些问题：
1.jQuery.handleError is not a function 2.提交form表单后，后端执行成功，并返回 200 success但是ajax回调函数进入error中解决方案：
经测试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 contextif (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 htmlif (type == "html")jQuery("<div>").html(data).evalScripts();return data;},handleError: function (s, xhr, status, e) {// If a local callback was specified, fire itif (s.error) {s.error.call(s.context || s, xhr, status, e);}// Fire the global callbackif (s.global) {(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);}}
文件中的js已经是修改后的,下载后可以直接使用。
以上就是本文的全部内容，希望对大家的学习有所帮助。
