变量变成复位输入字段

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()。