變量變成復位輸入字段

Question

<input type="file" onchange="uploadFiles()" multiple/> 

在變量存儲輸入值和復位輸入欄後後空，變變空

function uploadFiles(){ 
    var newFiles = $('input')[0].files; 
    $('input').replaceWith($('input').val('').clone(true)); 
    console.log(newFiles); // result == [] 
} 

請我該如何解決這個問題？

Answer 1

$('input')[0].files爲您提供input的FileList屬性，該屬性附加到它。更改輸入的值將導致更改屬性及其所有賦值的值。

您可以解決的問題，通過添加文件到一個單獨的數組：

var newFiles = $('input')[0].files; 
var filesArray = []; 
for(var i=0; i<newFiles.length; i++){ 
    filesArray[i] = newFiles[i]; 
} 
$('input').replaceWith($('input').val('').clone(true)); 
console.log(newFiles); // result == [] 
console.log(filesArray); // result == [File] 

Demo

注：出於安全原因，你可能會或可能不會使用文件轉換後的打算原始輸入的值。我還沒有測試過它。如果您可以確認或揭穿，請發表評論。

Answer 2

這是因爲當您重置輸入字段時，第二次觸發了您的onchange事件。重置輸入字段被認爲是一個改變。

解決方法是在更新值時暫時禁用onchange事件。

// remove the change handler 
$('input').off('change', uploadFiles); 
$('input').val(''); 
// re-establish the change handler 
$('input').on('change', uploadFiles); 

注：這是不是在你的腳本混合聯事件處理程序（onchange="whatever"）與處理一個好主意。你應該只是jQuery on()。