はじめに
HTML5/JavaScript でファイルのドラッグ&ドロップ、画像ファイルのプレビューの実装方法。
TL;DR
- ドラッグ&ドロップ 使いたい場合は、
dragover,dropに対してpreventDefault()が必要 dataTransfer.dropEffectをcopyに設定することで、ファイルドロップ時にファイルを参照できる- ドロップされたファイルは
drop内でevent.dataTransfer.filesで参照可能 - ドラッグ中の UI 変更は
dragover,dragleave,dropイベント内で実施 - 画像プレビューは
FileReaderのreadAsDataURLを使う - 1つの
inputに 1つのファイルにするために、DataTransferを生成して、DataTranfer.itemsのaddを利用