質問編集履歴

3 ソース内でご指摘いただいたところを追記しました

johna

johna score 1

2017/07/14 11:20  投稿

複数画像アップロード(ドラッグ&ドロップ)時に、表示される画像とファイル名がずれて表示されてしまう
<実現したいこと>
ブラウザ外から複数画像ファイルをドラッグ&ドロップで
ブラウザに画像とファイル名を表示させたいです。
<試したこと>
下記のようなコードを調べながら書いてみたのですが、
表示される画像とファイル名がずれてしまったり、同じ画像が連続して表示されてしまったりと
動作が安定しません。
imagereader.readAsDataURL(f);から↓実行後に
imagereader.onload = function(e)が実行されてほしいのですが、
上手く実行順の制御ができません。
色々試したのですが、どこに原因があるのかもわからず、、
どなたかお知恵を貸していただけないでしょうか。
宜しくお願いします。
```javascript
var image_num = 0; //追加しました  
 
$('.uploadArea').on('drop',function(e){
 e.preventDefault();
 var files = e.originalEvent.dataTransfer.files;
 for (var i=0; i<files.length; i++) {
   var f = files[i];
   var filename = "";
   var imagereader = new FileReader();
   if (!f.type.match('image.*')) {
     continue; // 画像ファイルのみアップロード可能にする為
   }
   if (f.type.match('image.*')) {
     imagereader.onload = function (e) {
       $('.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>');
       image_num++;
     }
     imagereader.readAsDataURL(f);
     var file_name_str = '<input type="hidden" name="image_file_name[]" value='+ files[i].name +'>';
     var file_size_str = '<input type="hidden" name="image_file_size[]" value='+ files[i].size +'>';
     $('#imageUpload').append(file_name_str);
     $('#imageUpload').append(file_size_str);
   }
 }
});
```
```html
<ul class="list_box">
</ul>
<div class="uploadArea" id="imageUpload">
<p>ここへすべての画像ファイルをドラッグしてください</p>
</div>
```
  • JavaScript

    21022 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8372 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2 ユーザー様から指摘を受けたので修正しました。

johna

johna score 1

2017/07/14 10:42  投稿

複数画像アップロード(ドラッグ&ドロップ)時に、表示される画像とファイル名がずれて表示されてしまう
複数ファイルドラッグ&ドロップで画像とファイル名を表示したいです。
下記のようなコードを調べながら書いてみたのですが、上手く動作しないです。
<実現したいこと>
ブラウザ外から複数画像ファイルをドラッグ&ドロップで
ブラウザに画像とファイル名を表示させたいです。
<試したこと>
下記のようなコードを調べながら書いてみたのですが、
表示される画像とファイル名がずれてしまったり、同じ画像が連続して表示されてしまったりと
動作が安定しません。
imagereader.readAsDataURL(f);から↓実行後に
imagereader.onload = function(e)が実行されてほしいのですが、
同時に実行されている?ような動作をしてしまいます
上手く実行順の制御ができません
宜しくお願いいたします。。
色々試したのですが、どこに原因があるのかもわからず、、
どなたかお知恵を貸していただけないでしょうか。
宜しくお願いします。
```javascript
$('.uploadArea').on('drop',function(e){
 e.preventDefault();
 var files = e.originalEvent.dataTransfer.files;
 for (var i=0; i<files.length; i++) {
   var f = files[i];
   var filename = "";
   var imagereader = new FileReader();
   if (!f.type.match('image.*')) {
     continue; // 画像ファイルのみアップロード可能にする為
   }
   if (f.type.match('image.*')) {
     imagereader.onload = function (e) {
       $('.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>');
       image_num++;
     }
     imagereader.readAsDataURL(f);
     var file_name_str = '<input type="hidden" id="image_file_name-'+ i +'" name="image_file_name[]" value='+ files[i].name +'>';
     var file_size_str = '<input type="hidden" id="image_file_size-'+ i +'" name="image_file_size[]" value='+ files[i].size +'>';
     var file_name_str = '<input type="hidden" name="image_file_name[]" value='+ files[i].name +'>';
     var file_size_str = '<input type="hidden" name="image_file_size[]" value='+ files[i].size +'>';
     $('#imageUpload').append(file_name_str);
     $('#imageUpload').append(file_size_str);
   }
 }
});
<div class="uploadArea" id = "imageUpload">
```
```html
<ul class="list_box">
</ul>
<div class="uploadArea" id="imageUpload">
<p>ここへすべての画像ファイルをドラッグしてください</p>
</div>
</div>
```
  • JavaScript

    21022 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8372 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1 文言修正の為、編集しました

johna

johna score 1

2017/07/13 23:49  投稿

複数画像アップロード時に、表示される画像とファイル名がずれて表示されてしまう
複数画像アップロード(ドラッグ&ドロップ)時に、表示される画像とファイル名がずれて表示されてしまう
複数ファイルドラッグ&ドロップで画像とファイル名を表示したいです。  
下記のようなコードを調べながら書いてみたのですが、上手く動作しないです。  
 
imagereader.readAsDataURL(f);から↓実行後に  
imagereader.onload = function(e)が実行されてほしいのですが、  
同時に実行されている?ような動作をしてしまいます。  
 
宜しくお願いいたします。。  
 
 
$('.uploadArea').on('drop',function(e){
 e.preventDefault();
 var files = e.originalEvent.dataTransfer.files;
 for (var i=0; i<files.length; i++) {
   var f = files[i];
   var filename = "";
   var imagereader = new FileReader();
   if (!f.type.match('image.*')) {
     continue; // 画像ファイルのみアップロード可能にする為
   }
   if (f.type.match('image.*')) {
     imagereader.onload = function (e) {
       $('.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>');
       image_num++;
     }
     imagereader.readAsDataURL(f);
     var file_name_str = '<input type="hidden" id="image_file_name-'+ i +'" name="image_file_name[]" value='+ files[i].name +'>';
     var file_size_str = '<input type="hidden" id="image_file_size-'+ i +'" name="image_file_size[]" value='+ files[i].size +'>';
     $('#imageUpload').append(file_name_str);
     $('#imageUpload').append(file_size_str);
   }
 }
});
<div class="uploadArea" id = "imageUpload">
<p>ここへすべての画像ファイルをドラッグしてください</p>
</div>
  • JavaScript

    21022 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    8372 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る