質問編集履歴
7
タイトルを訂正
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
IE11でjavascriptのformDataを利用してファイルを送信できなくて困っています
|
test
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
javascriptのnew formData()を利用して、コントローラーへファイルデータを渡す方法について、うまくいかなくて困っています。
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -16,6 +16,10 @@
|
|
|
16
16
|
|
|
17
17
|
|
|
18
18
|
|
|
19
|
+
サーバー側はASP.NET MVC5(C#)を使用しています。
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
19
23
|
ご教授お願いします。
|
|
20
24
|
|
|
21
25
|
|
6
投稿間違い訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -338,32 +338,6 @@
|
|
|
338
338
|
|
|
339
339
|
|
|
340
340
|
|
|
341
|
-
また、試したこととして、inputfileを削除してからformData.append("files", files)をしてみましたが、
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
```javascript
|
|
346
|
-
|
|
347
|
-
Imagedrop.prototype.upload = function (drapAndDropMode) {
|
|
348
|
-
|
|
349
|
-
var _self = this;
|
|
350
|
-
|
|
351
|
-
var uploadUrl = this._form.action;
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
var xhr = new XMLHttpRequest();
|
|
360
|
-
|
|
361
|
-
xhr.open("POST", uploadUrl, true);
|
|
362
|
-
|
|
363
|
-
xhr.send(formData);
|
|
364
|
-
|
|
365
|
-
}
|
|
366
|
-
|
|
367
341
|
```
|
|
368
342
|
|
|
369
343
|
|
5
javascriptコード誤記の訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -270,21 +270,27 @@
|
|
|
270
270
|
|
|
271
271
|
|
|
272
272
|
|
|
273
|
-
var formData = new FormData(this._form);
|
|
274
|
-
|
|
275
273
|
// ドラッグアンドドロップの時のみファイル追加処理
|
|
276
274
|
|
|
277
275
|
if (drapAndDropMode) {
|
|
278
276
|
|
|
279
|
-
// filesにはfilelistはある
|
|
280
|
-
|
|
281
277
|
var files = this._files;
|
|
282
278
|
|
|
279
|
+
this._inputFile.parentNode.removeChild(this._inputFile);
|
|
280
|
+
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
var formData = new FormData(this._form);
|
|
284
|
+
|
|
283
|
-
formData.append("files", files);
|
|
285
|
+
formData.append("files", files); // filesにfilelistはある
|
|
286
|
+
|
|
287
|
+
} else {
|
|
288
|
+
|
|
289
|
+
var formData = new FormData(this._form);
|
|
284
290
|
|
|
285
291
|
}
|
|
286
292
|
|
|
287
|
-
|
|
293
|
+
|
|
288
294
|
|
|
289
295
|
var xhr = new XMLHttpRequest();
|
|
290
296
|
|
|
@@ -332,6 +338,34 @@
|
|
|
332
338
|
|
|
333
339
|
|
|
334
340
|
|
|
341
|
+
また、試したこととして、inputfileを削除してからformData.append("files", files)をしてみましたが、
|
|
342
|
+
|
|
343
|
+
|
|
344
|
+
|
|
345
|
+
```javascript
|
|
346
|
+
|
|
347
|
+
Imagedrop.prototype.upload = function (drapAndDropMode) {
|
|
348
|
+
|
|
349
|
+
var _self = this;
|
|
350
|
+
|
|
351
|
+
var uploadUrl = this._form.action;
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
|
|
355
|
+
|
|
356
|
+
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
var xhr = new XMLHttpRequest();
|
|
360
|
+
|
|
361
|
+
xhr.open("POST", uploadUrl, true);
|
|
362
|
+
|
|
363
|
+
xhr.send(formData);
|
|
364
|
+
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
```
|
|
368
|
+
|
|
335
369
|
|
|
336
370
|
|
|
337
371
|
### 補足情報（FW/ツールのバージョンなど）
|
4
javascript不要個所の訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -252,12 +252,6 @@
|
|
|
252
252
|
|
|
253
253
|
this._inputFile.addEventListener("change", function (event) {
|
|
254
254
|
|
|
255
|
-
// Google Chromeの時は、event.dataTransfer.filesを利用していたが、
|
|
256
|
-
|
|
257
|
-
// inputFileにはすでにデータが入っているため、event.dataTransfer.filesは利用していない
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
255
|
_self._files = _self._inputFile.files;
|
|
262
256
|
|
|
263
257
|
_self.upload(false);
|
3
javascriptコード中に補足説明を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
|
|
299
299
|
|
|
300
300
|
|
|
301
|
-
// 画像のドラッグアンドドロップでは
|
|
301
|
+
// sendはできているが、画像のドラッグアンドドロップではファイルデータを渡せていない
|
|
302
302
|
|
|
303
303
|
xhr.send(formData);
|
|
304
304
|
|
2
発生している問題2つのうち、1つを解決したため、コードを訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
|
|
23
23
|
### 発生している問題
|
|
24
24
|
|
|
25
|
-
|
|
25
|
+
・画像ファイルのドラッグアンドドロップについて
|
|
26
26
|
|
|
27
27
|
Internet Explorer 11では、drop時にevent.dataTransfer.filesから、input fileのfilelistに追加ができないので、代替方法として、formData.appendで、filesをappendしたいのですが、うまくいかなくて困っています。
|
|
28
28
|
|
|
@@ -38,14 +38,6 @@
|
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
|
41
|
-
②ダブルクリックしてファイル選択
|
|
42
|
-
|
|
43
|
-
こちらについても、input fileにfilelistは入っているのですが、うまくいっていません。
|
|
44
|
-
|
|
45
|
-
コントローラーは実行されるが、filesはnullになっています。
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
41
|
```javascript
|
|
50
42
|
|
|
51
43
|
|
|
@@ -298,13 +290,7 @@
|
|
|
298
290
|
|
|
299
291
|
}
|
|
300
292
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
293
|
+
|
|
304
|
-
|
|
305
|
-
// this._inputFile.filesにfilelistはある
|
|
306
|
-
|
|
307
|
-
|
|
308
294
|
|
|
309
295
|
var xhr = new XMLHttpRequest();
|
|
310
296
|
|
|
@@ -312,7 +298,7 @@
|
|
|
312
298
|
|
|
313
299
|
|
|
314
300
|
|
|
315
|
-
//
|
|
301
|
+
// 画像のドラッグアンドドロップでは失敗
|
|
316
302
|
|
|
317
303
|
xhr.send(formData);
|
|
318
304
|
|
1
javascriptコード中の誤記を訂正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
|
|
163
163
|
"<div class=\"drag-and-drop-area\" id=\"dragAndDropArea\">\n" +
|
|
164
164
|
|
|
165
|
-
" <input type=\"file\" id=\"file\" accept=\"image/jpeg\" style=\"display: none\" />\n" +
|
|
165
|
+
" <input type=\"file\" id=\"files\" name=\"files\" accept=\"image/jpeg\" style=\"display: none\" />\n" +
|
|
166
166
|
|
|
167
167
|
" <div class=\"default-message\" id=\"defaultMessage\">\n" +
|
|
168
168
|
|
|
@@ -194,7 +194,7 @@
|
|
|
194
194
|
|
|
195
195
|
this._dragAndDropArea = document.getElementById("dragAndDropArea");
|
|
196
196
|
|
|
197
|
-
this._inputFile = document.getElementById("file");
|
|
197
|
+
this._inputFile = document.getElementById("files");
|
|
198
198
|
|
|
199
199
|
this._defaultMessage = document.getElementById("defaultMessage");
|
|
200
200
|
|