質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

Q&A

2回答

630閲覧

複数画像アップロード(ドラッグ&ドロップ)時に、表示される画像とファイル名がずれて表示されてしまう

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/07/13 14:42

編集2022/01/12 10:55

<実現したいこと>
ブラウザ外から複数画像ファイルをドラッグ&ドロップで
ブラウザに画像とファイル名を表示させたいです。

<試したこと>
下記のようなコードを調べながら書いてみたのですが、
表示される画像とファイル名がずれてしまったり、同じ画像が連続して表示されてしまったりと
動作が安定しません。

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2017/07/13 15:03

どのような動作を期待していたのかもう少し詳しく追記していただけませんか?また、list_boxクラスが付与されているHTMLの要素など、ソースコードは可能な限り記述すると回答がつきやすくなると思います。
kei344

2017/07/13 15:55

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
退会済みユーザー

退会済みユーザー

2017/07/14 01:47

ご指摘いただきありがとうございます。修正しました
guest

回答2

0

onloadは読み込み完了時点で呼び出される、非同期なメソッドです。
呼び出し自体が「あとから、そのうち」という性質な上、順不動になります。
そのため、ファイル名と一致しないような現象がおきるのです。
ファイル1つぶんを正確に処理するメソッドをつくり、それを呼び出すのがいいでしょう。

javascript

1var upload_image = function(f){ 2 if (!f.type.match('image.*')) { 3 return; // 画像ファイルのみアップロード可能にする為 4 } 5 var imagereader = new FileReader(); 6 imagereader.onload = function (e) { 7 $('.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>'); 8 // ファイル名処理はこの場所です。画像表示と分離するからずれるのです。 9 var file_name_str = '<input type="hidden" name="image_file_name[]" value='+ f.name +'>'; 10 var file_size_str = '<input type="hidden" name="image_file_size[]" value='+ f.size +'>'; 11 $('#imageUpload').append(file_name_str); 12 $('#imageUpload').append(file_size_str); 13 image_num++; 14 } 15 imagereader.readAsDataURL(f); 16}; 17 18$('.uploadArea').on('drop',function(e){ 19 e.preventDefault(); 20 var files = e.originalEvent.dataTransfer.files; 21 for (var i=0; i<files.length; i++) { 22 upload_image(files[i]); 23 } 24}); 25

onload呼び出しが順不同という性質上、このコードではアップロードされた順序通りに画像を表示することは保証できません
また、image_file_name[image_num]がどういうものなのかわからないので、そこが意図通りにならないかもしれませんが、これでひとまずわけのわからない挙動はおきないはずです。

投稿2017/07/14 02:29

zohnam

総合スコア1441

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

image_num が初期化されていないからでは?$('.uploadArea').on の前で var image_num = 0; としてみてはいかがでしょう。

投稿2017/07/14 01:55

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/07/14 02:24

早速のご回答ありがとうございます! ただしかしimage_numの初期化を入れましたが動作変わらずです。 (↑のソースコードに初期化の処理を追記いたしました。)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問