jquery - 重置输入字段后变量变空

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 为您提供 FileList附加到它的input的属性。更改输入的值将导致更改属性的值及其所有分配。

您可以通过将文件添加到单独的数组来解决该问题:

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

注意:出于安全原因，在更改原始输入的值后，您可能会或可能不会按预期使用文件。不过我还没有测试过。如果您能确认或揭穿，请发表评论。