PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

JavaScriptによるHTML5プログラミング入門:

ドラッグ&ドロップしよう! (5/5)

作成:2010-11-30 11:52
更新:2010-11-30 11:54
■ドラッグ&ドロップでファイルを読み込むには?
HTML5のドラッグ&ドロップは、HTMLのWebページ内にある要素だけしか使えないわけではありません。Webブラウザ外にあるものをドロップすることもできるのです。その一例が「ファイル」です。ファイルをドラッグ&ドロップしてページ内にその内容を読み込んで表示させる、なんてことも可能なのです。

ただし、そのためにはHTML5でファイルを扱うための「File API」というものについて理解していないといけません。このAPIについては別の記事にゆずるとして、実際にファイルをドロップするサンプルを作ってみましょう。ここでは、イメージをドラッグ&ドロップして<img>タグに表示させてみます。

まず、HTML側に、下のリストに挙げたような形で<img>タグを用意してください。続いて、script.js側に、下のリストにあるdoDragOverdoDropを用意してください。これでイメージファイルをドラッグ&ドロップして表示させることができるようになります。

ここでは、doDragOverでドロップされたオブジェクトの形式が"Files"かどうかをチェックしています。これでファイルを受け入れることができるようになります。

doDropでは、ドロップされたファイルを読み込んで<img>srcに設定をしています。ドロップされたファイル類は、event.dataTransferの「files」にまとめられています。これはFileListオブジェクトとなっており、ここにドロップされたファイルがまとめられています。ここでは、event.dataTransfer.files[0]で最初のファイルを取り出し、これを読み込むことにしています。

ファイルからのデータの読み込みは、FileReaderというものを使って行っています。readAsDataURLというメソッドでファイルの中身をすべて読み込み、onloadendイベントで読み込み完了したらresult(読み込んだ内容)を<img>srcに設定しています。

ファイル関係については別途調べるとして、このようにドラッグ&ドロップを利用することで、ファイルの読み込みも簡単に行えるようになった、ということはぜひ覚えておきましょう。


 

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

※Webページに用意するドロップ用の要素

<img id="img1" ondragover="doDragOver(event);"
	ondrop="doDrop(event);"
	class="droppable">


※script.jsに用意するスクリプト


function doDragOver(event){
	var type = event.dataTransfer.types.contains("Files");
	if (type){
		event.preventDefault();
	}
}

function doDrop(event){
	var img = document.getElementById("img1");
	var file = event.dataTransfer.files[0];
	var reader = new FileReader();
	reader.onloadend = function() {
		img.src = reader.result;
	}
	reader.readAsDataURL(file);
}



 


「JavaScriptによるHTML5プログラミング入門」に戻る



※その他のコンテンツ