HTML5 の File API でドラッグ&ドロップする


こんちには、鈴木です。

HTML5 には File API というものがあます。

File API を使うとローカル PC からブラウザにドラッグ&ドロップされたファイルを扱うことができます。

ということで、今回は File API によるドラッグ&ドロップ処理をご紹介します。

まずは以下の HTML から始めましょう!

ここで下準備と前提条件を明示しておきます。

  • ブラウザ依存のコードで本質的な処理を埋もれさせないために、jQuery を使用します。
  • ドロップしたい領域 ( <div> ) に droppable という id を付け、見やすいようにスタイルを指定しました。
  • これから「TODO ここにドラッグ&ドロップに必要な処理を記述します.」というコメントの部分を埋めていきます。

今の段階でブラウザで表示すると、以下のようになります。

ドロップのための、その1

それでは、ドラッグ&ドロップの処理を記述します。

細切れのコードを出しても分かりづらいので、一気に完成形のコードを出します。

重要な部分はコード中のコメントで補いました。

ポイントは、

  • dragenter と dragover イベントのデフォルト処理をキャンセルする。
  • drop イベントでドロップされたファイルの処理を行う。
  • ドロップされたファイルの内容は FileReader で読み込む。

といったところです。

今回は必要最低限の処理をご紹介しました。

実際に動かしていると、

  • 想定外の領域にドロップされてブラウザで普通にファイルが開かれてしまった。→ドロップ可能な領域は広くした方が良さそう。
  • ファイルではなくフォルダがドロップされた。→・・・ハンドリングできないっす(^^;
  • 画像などのバイナリファイルもドロップされる。→勝手にテキストファイルしかドロップされないと思い込んでました(^^;;

ということに気付いたりしますので、ご用心を。。(^^;;;

 


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です