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

这是因为重置输入字段时第二次触发了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()。

Answer 2

$('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

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

重置输入字段后，变量变空

2 个答案: