ファイルドロップゾーン
ファイルをドラッグ＆ドロップで受け取れるアップロード領域です。 label の中に隠した input type="file" を置くことで、エリアのクリックでもファイル選択ダイアログが開きます。
解説
ファイルをドラッグ＆ドロップで受け取れるアップロード領域です。labelの中に隠したinput type="file"を置くことで、エリアのクリックでもファイル選択ダイアログが開きます。JavaScriptではdragenterやdragoverで枠の色を変えて反応を示し、dropで受け取ったファイル名を表示します。
使いどころ
画像や資料のアップロードフォーム、プロフィール写真の差し替え、問い合わせの添付欄などに向きます。点線の枠と中央のアイコンで「ここに置ける」ことが直感的に伝わります。
- ドラッグ中は
is-overクラスで枠線と背景がハイライトされる - ドロップとクリック選択の両方でファイル名を反映する
- 受け取るファイルの種類は
inputにacceptを足して制限できる
各イベントでpreventDefaultを呼び、ブラウザがファイルを開いてしまう既定動作を抑止している点が要です。実運用では複数ファイル対応やサイズ制限の検証を追加するとより堅牢になります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
クリックでもファイルを選べますか
はい。label の中に input を隠して配置しているため、エリアをクリックすると標準のファイル選択ダイアログが開きます。ドラッグ＆ドロップとクリックの両方で同じようにファイルを受け取れます。
受け付けるファイルの種類を制限できますか
input に accept 属性を追加すれば、画像のみ・PDFのみといった制限ができます。サイズ上限や複数ファイルの扱いは、drop時に受け取ったファイル情報をJavaScriptで検証して制御します。