読者です 読者をやめる 読者になる 読者になる

javascript ドラッグ&ドロップによる複数ファイルアップロードについて

javascript html5

【仕様】
・ファイルをドラッグ&ドロップでアップロードしたい
・従来のファイル選択でのアップロードも可能(一度に複数選択可)

jQuery File Upload Demo
最初は「jQuery File Upload」でやろうとしたけど、
機能が多すぎて、導入やカスタマイズがめんどくさそうだったため、ヤメ。

色々jqueryプラグインを調べたけど、素直に自分で実装した方が
良さそうと感じたため、そうすることにした。

【FormDataについて】
仕様を満たすためには、html5の「FormData + multiple」という仕組みを利用する。
注意事項としては、IE9以下はhtml5に対応していないので、従来のUIにするといった事が必要。

【参考サイト】
Jqueryを使ってHTML5ドラッグ&ドロップファイルアップロード | IT-view
HTML5のFile APIを使用して、ドラッグ&ドロップでファイルをアップロード | Soraxism
$.ajaxファイルアップロードでプログレスバーを表示する。 - それマグで!

実装するにあたって参考にしたサイト

【変更点】
・1個ずつのアップを、一度に全部アップするように変更(fd.append('file[]', files[i])とすればよい)
・ドロップ後、即アップではなく、アップロードボタンを追加(e.originalEvent.dataTransfer.filesをいったん変数に保存すればよい)

結果的には、プラグインを使わず自分で実装して正解だったと思う。
流用するか、シンプルに一から作るか。どちらもメリットデメリットあるが、その見極めも重要だと感じた。

ようやくfxにも慣れてきました。メインはSBIFXトレード使ってます。
低予算(1000通貨)で比較 | FX比較 低予算から始めるFXランキング 初心者の外為入門