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

編集履歴

質問編集履歴

7

タイトルを訂正

2020/04/26 01:34

投稿

退会済みユーザー
title CHANGED
@@ -1,1 +1,1 @@
1
- ASP.NET MVC5で、javascriptのformDataを利用して、コントローラーへデータを渡す方法について困っています。
1
+ IE11でjavascriptのformDataを利用してファイルを送信できなくて困っています
body CHANGED
@@ -1,5 +1,5 @@
1
1
  ### 前提・実現したいこと
2
- ASP.NET MVC5で、javascriptのnew formData()を利用して、コントローラーへファイルデータを渡す方法について、うまくいかなくて困っています。
2
+ javascriptのnew formData()を利用して、コントローラーへファイルデータを渡す方法について、うまくいかなくて困っています。
3
3
 
4
4
  「画像ファイルのドラッグアンドドロップまたはダブルクリックしてファイル選択」
5
5
  を行うjavascriptを作成しています。
@@ -7,6 +7,8 @@
7
7
 
8
8
  Google Chromeでは問題なく動作したのですが、Internet Explorer 11に対応できるように変更しようとしています。
9
9
 
10
+ サーバー側はASP.NET MVC5(C#)を使用しています。
11
+
10
12
  ご教授お願いします。
11
13
 
12
14
  ### 発生している問題
5

6

投稿間違い訂正

2020/04/26 01:34

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -168,19 +168,6 @@
168
168
  ### 試したこと
169
169
  上記のjavascriptコード上でのコメント箇所あたりで試行錯誤しています。
170
170
 
171
- また、試したこととして、inputfileを削除してからformData.append("files", files)をしてみましたが、
172
-
173
- ```javascript
174
- Imagedrop.prototype.upload = function (drapAndDropMode) {
175
- var _self = this;
176
- var uploadUrl = this._form.action;
177
-
178
-
179
-
180
- var xhr = new XMLHttpRequest();
181
- xhr.open("POST", uploadUrl, true);
182
- xhr.send(formData);
183
- }
184
171
  ```
185
172
 
186
173
  ### 補足情報（FW/ツールのバージョンなど）
5

5

javascriptコード誤記の訂正

2020/04/26 01:16

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -134,14 +134,17 @@
134
134
  var _self = this;
135
135
  var uploadUrl = this._form.action;
136
136
 
137
- var formData = new FormData(this._form);
138
137
  // ドラッグアンドドロップの時のみファイル追加処理
139
138
  if (drapAndDropMode) {
140
- // filesにはfilelistはある
141
139
  var files = this._files;
140
+ this._inputFile.parentNode.removeChild(this._inputFile);
141
+
142
+ var formData = new FormData(this._form);
142
- formData.append("files", files);
143
+ formData.append("files", files); // filesにfilelistはある
144
+ } else {
145
+ var formData = new FormData(this._form);
143
146
  }
144
-
147
+
145
148
  var xhr = new XMLHttpRequest();
146
149
  xhr.open("POST", uploadUrl, true);
147
150
 
@@ -165,7 +168,21 @@
165
168
  ### 試したこと
166
169
  上記のjavascriptコード上でのコメント箇所あたりで試行錯誤しています。
167
170
 
171
+ また、試したこととして、inputfileを削除してからformData.append("files", files)をしてみましたが、
168
172
 
173
+ ```javascript
174
+ Imagedrop.prototype.upload = function (drapAndDropMode) {
175
+ var _self = this;
176
+ var uploadUrl = this._form.action;
177
+
178
+
179
+
180
+ var xhr = new XMLHttpRequest();
181
+ xhr.open("POST", uploadUrl, true);
182
+ xhr.send(formData);
183
+ }
184
+ ```
185
+
169
186
  ### 補足情報（FW/ツールのバージョンなど）
170
187
 
171
188
  .NET Framework 4.7.1
5

4

javascript不要個所の訂正

2020/04/26 01:09

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -125,9 +125,6 @@
125
125
  });
126
126
 
127
127
  this._inputFile.addEventListener("change", function (event) {
128
- 　　　　　　 // Google Chromeの時は、event.dataTransfer.filesを利用していたが、
129
- 　　　　　　 // inputFileにはすでにデータが入っているため、event.dataTransfer.filesは利用していない
130
-
131
128
  _self._files = _self._inputFile.files;
132
129
  _self.upload(false);
133
130
  });
5

3

javascriptコード中に補足説明を追加

2020/04/26 00:53

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -148,7 +148,7 @@
148
148
  var xhr = new XMLHttpRequest();
149
149
  xhr.open("POST", uploadUrl, true);
150
150
 
151
- 　　　　 // 画像のドラッグアンドドロップでは失敗
151
+ 　　　　 // sendはできているが、画像のドラッグアンドドロップではファイルデータを渡せていない
152
152
  xhr.send(formData);
153
153
  xhr.onreadystatechange = function () {
154
154
  if (xhr.readyState === XMLHttpRequest.DONE) {
5

2

発生している問題2つのうち、1つを解決したため、コードを訂正

2020/04/26 00:51

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
  ご教授お願いします。
11
11
 
12
12
  ### 発生している問題
13
- ①画像ファイルのドラッグアンドドロップについて
13
+ ・画像ファイルのドラッグアンドドロップについて
14
14
  Internet Explorer 11では、drop時にevent.dataTransfer.filesから、input fileのfilelistに追加ができないので、代替方法として、formData.appendで、filesをappendしたいのですが、うまくいかなくて困っています。
15
15
  filelistは取得できていますが、xmlHttpRequest送信時にコントローラーは実行されるが、filesはnullになっています。
16
16
 
@@ -18,10 +18,6 @@
18
18
 
19
19
  new FormData(this._form)をしている理由は、追加のパラメータをHTMLファイルにinputタグで直接記載して利用したいためです。
20
20
 
21
- ②ダブルクリックしてファイル選択
22
- こちらについても、input fileにfilelistは入っているのですが、うまくいっていません。
23
- コントローラーは実行されるが、filesはnullになっています。
24
-
25
21
  ```javascript
26
22
 
27
23
  var formData = new FormData(this._form);
@@ -148,14 +144,11 @@
148
144
  var files = this._files;
149
145
  formData.append("files", files);
150
146
  }
151
-
152
- // ダブルクリックしてファイル選択についても
147
+
153
- // this._inputFile.filesにfilelistはある
154
-
155
148
  var xhr = new XMLHttpRequest();
156
149
  xhr.open("POST", uploadUrl, true);
157
150
 
158
- 　　　　 // ①ドラッグアンドドロップ、②input changeのどちらでも失敗
151
+ 　　　　 // 画像のドラッグアンドドロップでは失敗
159
152
  xhr.send(formData);
160
153
  xhr.onreadystatechange = function () {
161
154
  if (xhr.readyState === XMLHttpRequest.DONE) {
5

1

javascriptコード中の誤記を訂正

2020/04/26 00:49

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -80,7 +80,7 @@
80
80
 
81
81
  var template = "\n" +
82
82
  "<div class=\"drag-and-drop-area\" id=\"dragAndDropArea\">\n" +
83
- " <input type=\"file\" id=\"file\" accept=\"image/jpeg\" style=\"display: none\" />\n" +
83
+ " <input type=\"file\" id=\"files\" name=\"files\" accept=\"image/jpeg\" style=\"display: none\" />\n" +
84
84
  " <div class=\"default-message\" id=\"defaultMessage\">\n" +
85
85
  " <p>ここに画像ファイルをドラッグ＆ドロップ、またはダブルクリックして選択</p>\n" +
86
86
  " <p>(.jpgファイル、1MBまで)</p>\n" +
@@ -96,7 +96,7 @@
96
96
 
97
97
  this._form = document.getElementById("Imagedrop");
98
98
  this._dragAndDropArea = document.getElementById("dragAndDropArea");
99
- this._inputFile = document.getElementById("file");
99
+ this._inputFile = document.getElementById("files");
100
100
  this._defaultMessage = document.getElementById("defaultMessage");
101
101
  this._previewImage = document.getElementById("previewImage");
102
102
  this._previewFileName = document.getElementById("previewFileName");
5