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

Question

I have multiple input files

<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">

I want each of it store in array so i did, this is working to me

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

But if one of the input file is empty is I got an error Cannot read property 'files' of null.

So I am trying to push the files in other way but not working

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

But if one of the input file is empty is I got an error Cannot read property 'files' of null.

That doesn't mean the input is empty, it means your getElementById call didn't return an element at all.

There's no reason for that getElementById call, you already have the elements in the collection referenced by your file_name variable. Just use it, and check its length to make sure it does have at least one file in it:

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

Note that the filenames will have fake paths on them.

Answer 2

Just check if fileUpload is not null..to do that add a condition in your for loop as pointed below:

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

Answer 3

v is your element, so $(v) is nonse, please have a look at the example.

 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">