<実現したいこと>
ブラウザ外から複数画像ファイルをドラッグ&ドロップで
ブラウザに画像とファイル名を表示させたいです。
<試したこと>
下記のようなコードを調べながら書いてみたのですが、
表示される画像とファイル名がずれてしまったり、同じ画像が連続して表示されてしまったりと
動作が安定しません。
imagereader.readAsDataURL(f);から↓実行後に
imagereader.onload = function(e)が実行されてほしいのですが、
上手く実行順の制御ができません。
色々試したのですが、どこに原因があるのかもわからず、、
どなたかお知恵を貸していただけないでしょうか。
宜しくお願いします。
javascript
1var image_num = 0; //追加しました 2 3$('.uploadArea').on('drop',function(e){ 4 e.preventDefault(); 5 var files = e.originalEvent.dataTransfer.files; 6 for (var i=0; i<files.length; i++) { 7 var f = files[i]; 8 var filename = ""; 9 var imagereader = new FileReader(); 10 if (!f.type.match('image.*')) { 11 continue; // 画像ファイルのみアップロード可能にする為 12 } 13 14 if (f.type.match('image.*')) { 15 imagereader.onload = function (e) { 16 $('.list_box').append('<li class="image_file" id="image_num-'+ image_num +'"><img src='+ e.target.result +' width="100" height="100"><span class="image_file_name">'+ image_file_name[image_num] +'</span></li>'); 17 image_num++; 18 } 19 imagereader.readAsDataURL(f); 20 var file_name_str = '<input type="hidden" name="image_file_name[]" value='+ files[i].name +'>'; 21 var file_size_str = '<input type="hidden" name="image_file_size[]" value='+ files[i].size +'>'; 22 $('#imageUpload').append(file_name_str); 23 $('#imageUpload').append(file_size_str); 24 } 25 } 26}); 27
html
1<ul class="list_box"> 2</ul> 3<div class="uploadArea" id="imageUpload"> 4<p>ここへすべての画像ファイルをドラッグしてください</p> 5</div>