

ChromeやSafariではドラッグアンドドロップでファイルをフォームにセットできます。（下図参照）

![画像の説明をここに入力](https://i.stack.imgur.com/iwFHu.gif)

しかし、IEだとこれが実現できません。（ドロップするとその画像をブラウザで開いてしまう）

JavaScriptを使ってIEでもドラッグアンドドロップでファイルをフォームにセットすることはできますか？

Ajaxでファイルアップロードをするプラグインやサンプルコードはたくさん見つかるのですが、「フォームにセットするだけ、サブミットは普通にボタンをクリックしてサブミットする」という情報は見つかりませんでした。

[こちらの情報](https://stackoverflow.com/questions/25247197/is-it-possible-to-use-
html-drag-and-drop-file-uploads-but-without-ajax-
xhr)は目的に近かったですが、IEでは機能しませんでした。

何か参考になりそうな情報があれば教えてください。  
よろしくお願いします。

ちなみにIEはIE11のような最近のバージョンを対象にしてもOKです。


CC BY-SA 3.0
2015-06-04T10:08:40.127
10977
2015-09-09T13:11:04.217
2017-05-23T12:38:56.083
-1
85
question
javascript html internet-explorer
IEでフォームにファイルをドラッグアンドドロップでセットしたい


以前に似たようなことをやろうとしてハマった経験がありますので、直接の回答ではないのですがご参考になればと思い投稿いたします。

結論から言うと、私の場合もフォームに直接ドロップする事はできませんでした。そのため回避策としてドロップ領域を別途用意(divタグで領域を作りました)して、addEventListenerでdropイベントを追加し、dropイベント内でドロップされたファイル名を取得して表示する、というようなことをやりました。

ただ、私の場合ファイルを複数選択する必要があったため、ファイル名入力フィールドは使用せずに、テーブル要素として表示させていましたので、ファイル名入力フィールドだと取得したファイル名をスクリプト等で表示させることができるかわかりません(確かできなかったように記憶しています、ちょっと自信ないですが)。

このため、submitボタンのイベントにも細工をして、表示している複数のファイルをそれぞれPOSTするような処理を追加しました。

回りくどいようですが、こういう回避策もあるということで。


CC BY-SA 3.0
2015-06-04T13:17:49.680
10979
2015-06-04T13:17:49.680
9515
10977
answer


[IE10 (Win7 32bit)](https://www.modern.ie/ja-jp/virtualization-
tools#downloads)で確認しましたが、[ng-file-
upload](http://jsfiddle.net/3t50b3fw/)を利用すれば実現可能です。

![](https://i.gyazo.com/fea82e2b9550a97e0ef6d899bffbe08b.gif)


CC BY-SA 3.0
2015-06-07T03:00:06.357
11064
2015-06-07T03:00:06.357
2017-03-10T09:42:49.003
-1
9834
10977
answer