今天做图片上传用ajaxFileUpload.js时遇到了一个错误提示:TypeError: $.ajaxFileUpload is not a function,下面给出解决办法!
ajaxFileUpload.js 很多同名的,因为做出来一个很容易。
AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。
下载地址就不贴了,下面直接给源码
jQuery.extend({ createUploadIframe: function (id, uri) { //create frame var frameId = 'jUploadFrame' + id; var iframeHtml = '
其实严格来说TypeError: $.ajaxFileUpload is not a function并不是一个真正的错误,这是jquery的版本问题,这个插件貌似只支持jquery1.4之前的版本,
为了让插件支持更高版本的jquery做了修改,将下列代码加入插件源文件即可
handleError: function (s, xhr, status, e) { if (s.error) { s.error.call(s.context || s, xhr, status, e); } // Fire the global callback if (s.global) { (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]); } }
插件原本并不支持多图片上传,如果要支持多图片上传,修改如下
//将插件源文件内的这些代码var oldElement = jQuery('#' + fileElementId);var newElement = jQuery(oldElement).clone();jQuery(oldElement).attr('id', fileId);jQuery(oldElement).before(newElement);jQuery(oldElement).appendTo(form);//改成下面这样即可
for(var i in fileElementId){
var oldElement = jQuery('#' + fileElementId[i]); var newElement = jQuery(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before(newElement); jQuery(oldElement).appendTo(form); }修改之后jQuery1.9以上会报错,(a.indexOf不是一个函数)
插件使用方法:
$.ajaxFileUpload([options])
options参数说明:
1、url 上传处理程序地址。
2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID ;有多个input标签时,多个文件域的ID需要写成数组形式['file1ID','file2ID']。3,secureuri 是否启用安全提交,默认为false。 4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。6,error 提交失败自动执行的处理函数。7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。8, type 当要提交自定义参数时,这个参数要设置成post
最后提示一句,input的name属性一定要写.