ドラッグ＆ドロップでファイルを選択する

File APIとDrag and Drop APIを使用して、ドラッグ＆ドロップしたファイルのサムネイルと情報を表示してみます。

サンプルコード

HTML

<div id="dropArea">画像ファイルをドラッグ＆ドロップ</div>
<div id="thumb">ここにサムネイルを表示します。</div>

CSS

#dropArea {
	width: 400px;
	padding: 100px;
	background: #eee;
	text-align: center;
}
#thumb img {
    max-width: 300px;
}

JavaScript

// File APIに対応しているか確認
if(window.File) {
	var dropArea = document.getElementById('dropArea');
	var thumb = document.getElementById('thumb');

	// エリア内にドラッグされたとき
	dropArea.addEventListener('dragover', function(e) {
		// ブラウザ上でファイルを開かないようにしておく
		e.stopPropagation();
		e.preventDefault();
	}, false);

	// エリア内にドロップされたとき
	dropArea.addEventListener('drop', function(e) {
		// ブラウザ上でファイルを開かないようにしておく
		e.stopPropagation();
		e.preventDefault();

		// ファイルの情報を取得
		var fileData = e.dataTransfer.files;

		for (var i = 0; i < fileData.length; i++) {
			var file = fileData[i];

			// 選択されたファイルが画像かどうか確認
			if(!file.type.match(/^image/)) {
				alert('画像を選択してください');
				return;
			}

			var reader = new FileReader();
			// ファイル読み取りに失敗したとき
			reader.onerror = function() {
				alert('ファイル読み取りに失敗しました')
			}
			// ファイル読み取りに成功したとき
			reader.onload = function(ev) {
				var div = document.createElement('div');
				var insert = '<img src="' + ev.target.result + '"><br>';
				insert += 'filename: ' + file.name + '<br>';
				insert += 'filesize: ' + file.size;
				div.innerHTML = insert;
				thumb.appendChild(div);
			}
			// ファイル読み取りを実行
			reader.readAsDataURL(file);
		}
	}, false);
}

ドラッグ＆ドロップしたファイルを表示するデモページ
　

【参考サイト】

• JavaScript でのローカル ファイルの読み込み – HTML5 Rocks
• 連載：人気順に説明する初めてのHTML5開発：JavaScriptでファイル操作！？ File APIを使いこなそう (1/2) – ＠IT