はじめに
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
を利用