21347


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

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

[code]

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

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

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

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

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


CC BY-SA 3.0
2016-01-25T08:08:48.330
21289
2016-01-27T20:24:31.353
11050
question
javascript html html5 firefox internet-explorer
ドラッグ＆ドロップで取得したファイルをinput type=fileに渡したい(chrome/firefox/ie)


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

手順としては、

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

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


CC BY-SA 3.0
2016-01-26T14:39:34.300
21347
2016-01-27T20:24:31.353
2016-01-27T20:24:31.353
9515
9515
21289
answer