質問編集履歴
3
ソース内でご指摘いただいたところを追記しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -33,6 +33,10 @@
|
|
|
33
33
|
|
|
34
34
|
|
|
35
35
|
```javascript
|
|
36
|
+
|
|
37
|
+
var image_num = 0; //追加しました
|
|
38
|
+
|
|
39
|
+
|
|
36
40
|
|
|
37
41
|
$('.uploadArea').on('drop',function(e){
|
|
38
42
|
|
2
ユーザー様から指摘を受けたので修正しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
<実現したいこと>
|
|
2
2
|
|
|
3
|
+
ブラウザ外から複数画像ファイルをドラッグ&ドロップで
|
|
4
|
+
|
|
5
|
+
ブラウザに画像とファイル名を表示させたいです。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
<試したこと>
|
|
10
|
+
|
|
3
|
-
下記のようなコードを調べながら書いてみたのですが、
|
|
11
|
+
下記のようなコードを調べながら書いてみたのですが、
|
|
12
|
+
|
|
13
|
+
表示される画像とファイル名がずれてしまったり、同じ画像が連続して表示されてしまったりと
|
|
14
|
+
|
|
15
|
+
動作が安定しません。
|
|
4
16
|
|
|
5
17
|
|
|
6
18
|
|
|
@@ -8,15 +20,19 @@
|
|
|
8
20
|
|
|
9
21
|
imagereader.onload = function(e)が実行されてほしいのですが、
|
|
10
22
|
|
|
11
|
-
|
|
23
|
+
上手く実行順の制御ができません。
|
|
12
24
|
|
|
13
25
|
|
|
14
26
|
|
|
27
|
+
色々試したのですが、どこに原因があるのかもわからず、、
|
|
28
|
+
|
|
29
|
+
どなたかお知恵を貸していただけないでしょうか。
|
|
30
|
+
|
|
15
|
-
宜しくお願い
|
|
31
|
+
宜しくお願いします。
|
|
16
32
|
|
|
17
33
|
|
|
18
34
|
|
|
19
|
-
|
|
35
|
+
```javascript
|
|
20
36
|
|
|
21
37
|
$('.uploadArea').on('drop',function(e){
|
|
22
38
|
|
|
@@ -52,9 +68,9 @@
|
|
|
52
68
|
|
|
53
69
|
imagereader.readAsDataURL(f);
|
|
54
70
|
|
|
55
|
-
var file_name_str = '<input type="hidden"
|
|
71
|
+
var file_name_str = '<input type="hidden" name="image_file_name[]" value='+ files[i].name +'>';
|
|
56
72
|
|
|
57
|
-
var file_size_str = '<input type="hidden"
|
|
73
|
+
var file_size_str = '<input type="hidden" name="image_file_size[]" value='+ files[i].size +'>';
|
|
58
74
|
|
|
59
75
|
$('#imageUpload').append(file_name_str);
|
|
60
76
|
|
|
@@ -68,10 +84,18 @@
|
|
|
68
84
|
|
|
69
85
|
|
|
70
86
|
|
|
87
|
+
```
|
|
71
88
|
|
|
89
|
+
```html
|
|
72
90
|
|
|
91
|
+
<ul class="list_box">
|
|
92
|
+
|
|
93
|
+
</ul>
|
|
94
|
+
|
|
73
|
-
<div class="uploadArea" id
|
|
95
|
+
<div class="uploadArea" id="imageUpload">
|
|
74
96
|
|
|
75
97
|
<p>ここへすべての画像ファイルをドラッグしてください</p>
|
|
76
98
|
|
|
77
99
|
</div>
|
|
100
|
+
|
|
101
|
+
```
|
1
文言修正の為、編集しました
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
複数画像アップロード時に、表示される画像とファイル名がずれて表示されてしまう
|
|
1
|
+
複数画像アップロード(ドラッグ&ドロップ)時に、表示される画像とファイル名がずれて表示されてしまう
|
test
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
+
複数ファイルドラッグ&ドロップで画像とファイル名を表示したいです。
|
|
2
|
+
|
|
3
|
+
下記のようなコードを調べながら書いてみたのですが、上手く動作しないです。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
imagereader.readAsDataURL(f);から↓実行後に
|
|
8
|
+
|
|
9
|
+
imagereader.onload = function(e)が実行されてほしいのですが、
|
|
10
|
+
|
|
11
|
+
同時に実行されている？ような動作をしてしまいます。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
宜しくお願いいたします。。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
1
21
|
$('.uploadArea').on('drop',function(e){
|
|
2
22
|
|
|
3
23
|
e.preventDefault();
|