2016-08-29 10 views
0

に複数の画像ファイルをプッシュするためにどのように私は、複数の入力ファイル Javascriptが:配列

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

しかし、入力ファイルの1つが空の場合、エラーが発生します。nullのプロパティ 'files'を読み取れません。

は、だから私は、他の方法でファイルをプッシュしようとしているが、

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

答えて

1

を動作していない。しかし、入力ファイルのいずれかが空である場合、私は、エラーがnullのプロパティ「ファイル」を読み込めません得ているのです。 inputが空であることを意味しません

、それはあなたのgetElementByIdコールがまったくの要素を返しませんでしたを意味します。

はそのgetElementByIdコールのための理由はありません、あなたはすでにあなたfile_name変数が参照するコレクション内の要素を持っています。ファイル名は、それらに偽のパスを持っていることを

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

注:念のそれはそれで少なくとも1つのファイルを持っている作るためにそれを使用し、そのlengthを確認してください。 fileUploadが下に指摘したようにそれはあなたのループのために条件を追加行うnull..toない場合

+0

私はおよそ時間のためにこれを解決しようとしています、ありがとうございました。 –

1

だけチェック:

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

Vをそう$(V)がnonseで、あなたの要素であり、この例を見てください。

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