こんちには、鈴木です。
HTML5 には File API というものがあます。
File API を使うとローカル PC からブラウザにドラッグ＆ドロップされたファイルを扱うことができます。
ということで、今回は File API によるドラッグ＆ドロップ処理をご紹介します。
まずは以下の HTML から始めましょう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>HTML5 でドラッグ＆ドロップ</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(function() { // TODO ここにドラッグ＆ドロップに必要な処理を記述します. }); </script> </head> <body> <div id="droppable" style="border: gray solid 1em; padding: 2em;"> ファイルをドロップしてください。 </div> </body> </html> |
ここで下準備と前提条件を明示しておきます。
- ブラウザ依存のコードで本質的な処理を埋もれさせないために、jQuery を使用します。
- ドロップしたい領域 ( <div> ) に droppable という id を付け、見やすいようにスタイルを指定しました。
- これから「TODO ここにドラッグ＆ドロップに必要な処理を記述します.」というコメントの部分を埋めていきます。
今の段階でブラウザで表示すると、以下のようになります。
ドロップのための、その１
それでは、ドラッグ＆ドロップの処理を記述します。
細切れのコードを出しても分かりづらいので、一気に完成形のコードを出します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <title>HTML5 でドラッグ＆ドロップ</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script language="javascript"> $(function() { var droppable = $("#droppable"); // File API が使用できない場合は諦めます. if(!window.FileReader) { alert("File API がサポートされていません。"); return false; } // イベントをキャンセルするハンドラです. var cancelEvent = function(event) { event.preventDefault(); event.stopPropagation(); return false; } // dragenter, dragover イベントのデフォルト処理をキャンセルします. droppable.bind("dragenter", cancelEvent); droppable.bind("dragover", cancelEvent); // ドロップ時のイベントハンドラを設定します. var handleDroppedFile = function(event) { // ファイルは複数ドロップされる可能性がありますが, ここでは 1 つ目のファイルを扱います. var file = event.originalEvent.dataTransfer.files[0]; // ファイルの内容は FileReader で読み込みます. var fileReader = new FileReader(); fileReader.onload = function(event) { // event.target.result に読み込んだファイルの内容が入っています. // ドラッグ＆ドロップでファイルアップロードする場合は result の内容を Ajax でサーバに送信しましょう! $("#droppable").text("[" + file.name + "]" + event.target.result); } fileReader.readAsText(file); // デフォルトの処理をキャンセルします. cancelEvent(event); return false; } // ドロップ時のイベントハンドラを設定します. droppable.bind("drop", handleDroppedFile); }); </script> </head> <body> <div id="droppable" style="border: gray solid 1em; padding: 2em;"> ファイルをドロップしてください。 </div> </body> </html> |
重要な部分はコード中のコメントで補いました。
ポイントは、
- dragenter と dragover イベントのデフォルト処理をキャンセルする。
- drop イベントでドロップされたファイルの処理を行う。
- ドロップされたファイルの内容は FileReader で読み込む。
といったところです。
今回は必要最低限の処理をご紹介しました。
実際に動かしていると、
- 想定外の領域にドロップされてブラウザで普通にファイルが開かれてしまった。→ドロップ可能な領域は広くした方が良さそう。
- ファイルではなくフォルダがドロップされた。→・・・ハンドリングできないっす（＾＾；
- 画像などのバイナリファイルもドロップされる。→勝手にテキストファイルしかドロップされないと思い込んでました（＾＾；；
ということに気付いたりしますので、ご用心を。。（＾＾；；；
