teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問IE11でjavascriptのformDataを利用してファイルを送信できなくて困っています

編集履歴

質問編集履歴

7

タイトルを訂正

2020/04/26 01:34

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- ASP.NET MVC5で、javascriptのformDataを利用して、コントローラーへデータを渡す方法について困っています。
1
+ IE11でjavascriptのformDataを利用してファイルを送信できなくて困っています
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- ASP.NET MVC5で、javascriptのnew formData()を利用して、コントローラーへファイルデータを渡す方法について、うまくいかなくて困っています。
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

投稿間違い訂正

2020/04/26 01:34

投稿

退会済みユーザー
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コード誤記の訂正

2020/04/26 01:16

投稿

退会済みユーザー
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不要個所の訂正

2020/04/26 01:09

投稿

退会済みユーザー
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コード中に補足説明を追加

2020/04/26 00:53

投稿

退会済みユーザー
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つを解決したため、コードを訂正

2020/04/26 00:51

投稿

退会済みユーザー
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
- 　　　　 // ①ドラッグアンドドロップ、②input changeのどちらでも失敗
301
+ 　　　　 // 画像のドラッグアンドドロップでは失敗
316
302
 
317
303
  xhr.send(formData);
318
304
 

1

javascriptコード中の誤記を訂正

2020/04/26 00:49

投稿

退会済みユーザー
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