ajaxFileUpload异步上传资源，onchange屡次调用问题的解决方案

1、上传文件的作法

1 前端代码

<input id="myfiles" name="myfiles" type="file"  onchange="upload();"/>
<input type="button" name="btn_abc" onclick="document.getElementById('myfiles').click();"  style="xxxx" />

upload js方法

function upload() { 
    alert("haha");
    $.ajaxFileUpload({ 
        url : "xxxx", 
        secureuri : false, 
        fileElementId : 'myfiles', 
        dataType : 'JSON',
        data: {                    …
        }, 
        success : function(data, status) {               
        }, 
        error : function(data, status, e) { 
             ….
        } 
    }); 
     return false; 
 };                            

　　

2 界面

 

3 执行结果

咱们发现确实弹框了，可是弹了不仅一次，这是什么缘由呢？

 

 

4 经过查看ajaxFileUpload源码，其作法我的总结以下。

i 建立一个from表单，表单的action是咱们一开始调用ajaxFileUpload方法是传入的参数url

ii 经过jquery的clone方法，将原来的各类input复制到步骤1 建立的form表单下。

iii 将form表单append到一个iframe下

iv 经过form表单提交数据，发送同步请求去上传资源，但建立的iframe和咱们的页面不在同一个层级，因此刷新了以后对咱们的页面是不影响的。

 

我使用的Chrome的版本以下

 

通过调试发现，出现这种弹框屡次的缘由是因为ajaxFileUpload插件的fileElementId形成的。

来看下源码

AjaxFileUpload.js

 

 

此时会调用到JQuery的clone方法，

 

所以初步肯定了是由于clone方法在复制节点的时候调用到了复制的input中的onchange方法或者是复制过来后副本的onchange方法。

在用低版本的Chrome测试了下，发如今clone方法，不会调用到onchange方法，版本以下

 

最后，总结如下出现上传文件屡次弹框的缘由是：Chrome的版本升级后，对jquery的clone方法的解析执行跟之前不同。

 

5 解决方案

记录以前的路径，而后每次获取当前路径先跟以前的作对比，不相等才发请求

var prePath = $('#myfiles').val();
function upload() { 
    var curPath = $('#myfiles').val();
    if (prePath == curPath) {
        return false;
    }
    prePath = curPath;
    $.ajaxFileUpload({ 
        url : "xxxx", //submit to UploadFileServlet 
        secureuri : false, 
        fileElementId : 'myfiles', 
        dataType : 'JSON',
        data: {
        }, 
        success : function(data, status) { 
        }, 
        error : function(data, status, e) { 
        } 
    }); 
    return false; 
};