Javascript:如何将多个图像文件推入数组

Javascript: How to push multiple image files into array

本文关键字：文件 图像 数组 Javascript      更新时间：2023-09-26

我有多个输入文件

<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]);
}

但是如果其中一个输入文件是空的，则我得到了一个错误，不能读取属性'files'为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?
});

检查fileUpload是否为空，在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]);
}

但是如果其中一个输入文件是空的，则我得到了一个错误，不能读取属性'files'为null。

这并不意味着input是空的，它意味着你的getElementById调用根本没有返回一个元素。

没有理由调用getElementById，您已经拥有由file_name变量引用的集合中的元素。只要使用它，检查它的length，以确保它至少有一个文件:

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

v是您的元素，所以$(v)是无意义的，请查看示例。

var file_nameArr = [];
$('input[name="file_name[]"]').each(function(k,v){
  if (v.value.length > 0)
    file_nameArr.push(v.value); //How do i push the files into my array?
  else
    console.log('input is empty')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
<input type="file" name="file_name[]" id="file_id_3">
<input type="file" name="file_name[]" id="file_id_4">
<input type="file" name="file_name[]" id="file_id_5">

相关文章：