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已经是修改后的,下载后可以直接使用。
以上就是本文的全部内容,希望对大家的学习有所帮助。