ajaxfileupload.js目前功能最全版本(多文件、异常处理等),顺便解决只能上传一次的BUG(非live绑定)

前言

之前项目中要进行文件的ajax上传时习惯性的用ajaxfileupload.js这个插件,当时遇到一个问题,使用on绑定change事件上传一次后,再次上传时就不再激发change事件了,当时项目紧,为了省事,直接用live绑定change事件搞定。最近项目中使用bootstrap-fileinput.js v3.1.3(http://www.jasny.net/bootstrap/javascript/#fileinput)进行文件上传,配合ajaxfileupload.js插件进行ajax提交,再次遇到这个问题,正好周末有时间看看。

解决方案

解决方法直接了当,直接读源码!从第45行开始,是进行input控件复制,这里用了for是因为要支持多文件,原理很简单,将旧input克隆生成新input,将新input放到旧input前面,然后将旧input追加到临时的form提交到服务器。作者这样做的原因应该是IE不支持file控件值的复制,因此只好将旧input追加到临时form进行提交,复制一个新input放回旧input原来所处的位置。那么on绑定change事件上传一次就失效的BUG就找到原因了,是因为在复制的过程中,旧input已绑定的事件没有复制,问题就出在clone()这个方法,查查API,得知,默认是不复制绑定的事件的。
ajaxfileupload.js目前功能最全版本(多文件、异常处理等),顺便解决只能上传一次的BUG(非live绑定)_第1张图片
解决的方法很简单,将clone()改成clone(true,true),如下代码所示:

for (var i in fileElementId) {
   var oldElement = jQuery('#' + fileElementId[i]);
   var newElement = jQuery(oldElement).clone(true,true);
   jQuery(oldElement).attr('id', fileId);
   jQuery(oldElement).before(newElement);
   jQuery(oldElement).appendTo(form);           
}

下面这段代码是ajaxfileupload.js的完整代码,已经不知道是从哪儿获取的,支持多文件上传和异常处理(在此向原作者表示感谢!),笔者只是稍作修改,解决上面所说的BUG。

插件完整代码

jQuery.extend({
    createUploadIframe: function (id, uri) {

        //create frame
        var frameId = 'jUploadFrame' + id;
        var iframeHtml = '