ドラッグ&ドロップでファイルを選択する方法と画像ファイルのプレビュー

ドラッグ&ドロップでのファイル選択と画像プレビュー方法

フォームからアップロードするファイルを、画面外からのドラッグ&ドロップで選択可能にする方法と
ドラッグ&ドロップした画像ファイルをプレビューする方法を順番にメモします。

環境:
Mac OS 10.13.6、
ブラウザ : Google Chrome : 79.0.3945.88(Official Build) (64 ビット)

ドラッグ&ドロップしたファイルを選択状態にする

ブラウザへのドラッグ&ドロップ操作時に発生するイベント(DragEvent)の、
dropイベントを利用してinputタグへの選択を可能にします。

DragEventと発生タイミング

dragenter : 有効なドロップ先へドラッグ操作が開始したとき
dragover : 有効なドロップ先の上にドラッグされている間
dragleave : 有効なドロップ先からドラッグ操作が離れたとき
drop : 有効なドロップ先へドロップされたとき
(詳細)DragEvent

(HTML)

(CSS)

inputタグ、type属性をfileとしてファイルを選択出来るようにし、
ファイルをドラッグ&ドロップする領域を作成します。(div#preview-area )

(JavaScript)

対象の領域以外でドラッグ&ドロップした際にファイルがブラウザ上で開かないよう、
document要素のdragoverとdorpイベントでpreventDefault関数を実行させる。
(イベント処理無効化)

対象の領域のdropイベントで、
ファイルを選択するinputタグのfilesプロパティへ※DataTransferオブジェクトのfilesの値を指定する事で、
通常のファイル選択と同じ動きとなる。

※ドラッグ&ドロップ操作の実行中、データを保持するために使われるHTML5の機能

ドラッグ&ドロップした画像をプレビューする

ドラッグ&ドロップで選択した画像ファイルを画面上にプレビュー出来るようにします。

今回はドラッグ&ドロップする場所とプレビューされる場所を同じ領域にしています。
(imgタグで作成した枠内へドラッグ&ドロップ)

(HTML)

(CSS)

(JavaScript)

dropイベント内で、FileReaderオブジェクトを使用する。

プレビュー用のimgタグのsrc属性に選択中のバイナリデータ(画像)を指定し、
readAsDataURLで読み込ませる事でプレビューが可能となります。

jQueryで記述する


(jQuery : 3.3.1)

jQueryを使用する場合、以下のように記述出来ます。

(注意)
jQueryはJavaScriptのイベントオブジェクトdataTransferに直接アクセス出来ませんので、
originalEvent.dataTransferと記述します。

参考:
MDN web docs / DragEvent
MDN web docs / Event.target
MDN web docs / DataTransfer
MDN web docs / FileReader.readAsDataURL()
ドラッグ&ドロップでファイルをアップロードする(最低限版)
jQuery Event から DOM Event を取る

Follow me!