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; 
};