Javascript:如何将多个图像文件推送到数组中

Question

我有多个输入文件

<input type="file" name="file_name[]" id="file_id_0">
<input type="file" name="file_name[]" id="file_id_1">
<input type="file" name="file_name[]" id="file_id_2">

我希望每个都存储在数组中，所以我这样做了，这对我有用

var imageContainer = [];
var file_name = document.getElementsByName('file_name[]');
for(var i = 0; i< file_name.length; i++){
    alert(i);
    var fileUpload = document.getElementById('file_id_'+i);
    imageContainer.push(fileUpload.files[0]);
}

var data = new FormData();
for(var b=0; b<imageContainer.length; b++){
    data.append('file_name[]', imageContainer[b]);
}

但是如果其中一个输入文件是空的，我会得到一个错误 Cannot read property 'files' of null。

所以我试图以其他方式推送文件但不起作用

var file_nameArr = [];
$('input[name="file_name[]"]').each(function(k,v){
    file_nameArr.push($(v).val()); //How do i push each files into my array?
});

Answer 1

只需检查 fileUpload 是否不为 null.. 为此，请在您的 for 循环中添加一个条件，如下所示:

var file_name = document.getElementsByName('file_name[]');
for(var i = 0; i< file_name.length; i++){
    alert(i);
    var fileUpload = document.getElementById('file_id_'+i);
  if(fileUpload )
    imageContainer.push(fileUpload.files[0]);
}