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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

1回答

8707閲覧

【js】ドラッグ&ドロップでファイルアップロードしたい。edgeが動かない

ekishaba

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2017/03/09 17:37

###前提・実現したいこと

ドラッグ&ドロップでファイルアップロードをしたいが、chromeやsafariだと動くけど、IE11,edgeだと動かない

###発生している問題・エラーメッセージ

ドラッグ&ドロップと「ファイルを指定」の両方に対応して、ファイルアップロードをしたく実装したのですが、chromeやsafariだと問題なく動きますが、IE11,edgeだと動きません。 ドラッグ&ドロップでできたdataTransfer.filesを「ファイルを指定」にあるfilesに入れているのですが、IE11,edgeの場合のみうまく入りません。 type=fileは制約で上書きができないのかもしれませんが、その他の実装方法もうまくいかず行き詰まっている状態です。 元々は「ファイルを指定」を使った普通?のファイルアップロードだったのですが、要望によりドラッグ&ドロップでもできるように!ということで改修しています。

###該当のソースコード

javascript

1<tr id="drag-drop-area"> 2 <th><div class="required">ファイル</div></th> 3 <td > 4 ファイルをドラッグ&ドロップ、もしくは下の「ファイルを選択」をクリック<br /> 5 <input type="file" name="file" size="60" value="" onkeydown="return false;" onkeyup="return false;" id="fileInput" class="idsymbol"> 6 </td> 7 </tr> 8 <script type="text/javascript"> 9 var fileArea = document.getElementById('drag-drop-area'); 10 var fileInput = document.getElementById('fileInput'); 11 fileArea.addEventListener('dragover', function(evt){ 12 evt.preventDefault(); 13 fileArea.classList.add('dragover'); 14 }); 15 fileArea.addEventListener('dragleave', function(evt){ 16 evt.preventDefault(); 17 fileArea.classList.remove('dragover'); 18 }); 19 fileArea.addEventListener('drop', function(evt){ 20 evt.preventDefault(); 21 fileArea.classList.remove('dragenter'); 22 var files = evt.dataTransfer.files; 23 fileInput.files = files; 24 }); 25 </script> 26

###試したこと
microsoftのブラウザー以外では問題なく、「ファイルを指定」してのファイルアップロードは問題なく動いている状態です。

###補足情報(言語/FW/ツール等のバージョンなど)
javascript,html5

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

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

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

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

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

guest

回答1

0

evt.preventDefault();だけではなくevt.stopPropagation();をそれぞれ追加してみてください。

投稿2017/03/09 23:54

turbgraphics200

総合スコア4267

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

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

ekishaba

2017/03/10 03:10

ご回答ありがとうございます。 evt.stopPropagation();も入れて試していたのですが、 特に変化がなかったので今は取ってしまっている状態なんです。 他の実装方法でもあると良いのですが。
turbgraphics200

2017/03/10 03:35

submitで送信できるよう、fileInputに値を設定しているのだと思いますが、これだと動作しません。 FormDataを使ってAjaxで送信すればいいでしょう。
ekishaba

2017/03/10 03:59

ありがとうございます。やはりajaxしかないですかね。。そちらの実装は考えていたのですが、既存の作りに追加する形で考えておりました。もう少し探ってみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問