Javascript: How to push multiple image files into array
<p>I have multiple input files</p>

<pre><code>&lt;input type="file" name="file_name[]" id="file_id_0"&gt;
&lt;input type="file" name="file_name[]" id="file_id_1"&gt;
&lt;input type="file" name="file_name[]" id="file_id_2"&gt;
</code></pre>

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

<pre><code>var imageContainer = [];
var file_name = document.getElementsByName('file_name[]');
for(var i = 0; i&lt; 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&lt;imageContainer.length; b++){
    data.append('file_name[]', imageContainer[b]);
}
</code></pre>

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

<p>So I am trying to push the files in other way but not working</p>

<pre><code>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?
});
</code></pre>