2

既存のファイルアップロード機能にドラッグ&ドロップによるアップロード機能を追加したいと考えています。

既存がinput type=fileでファイルを選択した後にsubmit押下でアップロードしているので
ファイル選択の部分だけドラッグ&ドロップに変えたいのですが、
Chromeなら

$('input[type=file]')[0].files[0] = e.datatransfer.files;

のような形でドロップされたファイルをinputに渡す事が出来るのですが、firefox/ieだと
上書きが出来ず困っています。

質問としましては
1.firefox/ieでもinputにファイルを渡す方法を知りたい
2.仕様上不可能であるなら他の方法を知りたい
です。

ドラッグ&ドロップによるファイルアップロードの解説を一通り見たのですがどれも
ajaxを使った非同期通信ばかりで今回の要件に合いませんでした。
またIEのバージョンについては11でお考え下さい。

どうぞよろしくお願い致します。

1 件の回答 1

3

FireFoxで似たような壁にぶつかって悩んだことがあります。
その時の結論はinput type='file'を使うのをやめて、ファイルアップロード部分は自力で行う、というもので、ファイルアップロード部分はsubmitに頼らず実装しなおしました。

手順としては、

  1. なにがしかのタグでファイル名を表示しておき、実際にドロップされたファイルの情報は別に保持しておく
  2. アップロード用のボタン(input type='button')を用意する(submitは使いません)
  3. アップロード用のボタンのonclickハンドラで、他のフォーム要素のデータと一緒に保持しているファイルについてもPOST処理を行う(XMLHttpRequestを使います)。

もっとスマートなやり方があったかもしれませんが、ご参考まで。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。