html

html はファイルをドロップする div と表示する div を用意します。

html

	<p> ファイルをドロップしてください。</p>
	<div id="file-input">
		<div class="input"></div>
		<div class="out"></div>
	</div>
	

cssでドロップするdivを大きくしておくと良い感じだと思います。

css

	#file-input div.input {
		padding: 60px;
		border: solid 1px #333;
		width: 300px;
		height: 200px;
	}
	

jQueryファイルの情報を取得

File API はjQueryを使用しなくても使えますが、要素の操作とかが大変なのでここではjQueryを使用します。

通常のブラウザの動作はファイルをドロップするとそのまま開く処理になってしまいます。
「dragover」「drop」「dragenter」のイベントに「preventDefault」を設定することで開く処理を無効にできます。

JavaScript

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		var inEle = $('#file-input div.input'),
		      outEle = $('#file-input div.out');
		inEle
		.on('dragenter', function(e) {
			e.preventDefault();
		})
		.on('dragover', function(e){
			e.preventDefault();
		})
		.on('drop', function(e){
			e.preventDefault();
			// ここにドロップ後の処理を書く
		});
	});
	</script>
	

最初にドロップされたファイルの情報を取得します。
「drop」イベントを次のように変更します。

JavaScript

	.on('drop', function(e){
		e.preventDefault();
		var files = e.originalEvent.dataTransfer.files;
		console.log(files);
	});
	

これでファイルをドロップされたファイルの情報が「files」に入ります。
「files」は配列になってますので、実際には「files[0]」などして各ファイルを扱います。

ファイルの種類を判別

ファイルを読み込んだら、テキストなのか、画像なのか判別する必要がありますね。
ファイルの種類は「type」に入ってますので、「jpg」だけ扱いたい場合は次のような条件分岐になります。

JavaScript

	var files = e.originalEvent.dataTransfer.files;
	for (var i=0; i<files.length; i++) {
		if (files[i].type === 'image/jpeg') {
			console.log(files[i].type);
		}
	}
	

画像を全て扱う

画像は「jpg」の他にも「png」だったり「gif」だったりしますね。
ファイルタイプは画像なら最初に「image」が入りますので、とにかく画像を扱いたいという場合は「image.*」でマッチさせます。

JavaScript

	if (files[i].type.match('image.*')) {
		console.log(files[i].type);
	}
	

ドロップした画像を表示する

ファイルの取り込み方がわかったので、次は取り込んだファイルに対して何か処理をしてみましょう。簡単に画像を表示するだけの処理をしてみます。

JavaScript

	for (var i=0; i<files.length; i++) {
		if (files[i].type.match('image.*')) {
			var reader = new FileReader();
			//エラー処理
			reader.onerror = function(e) {
				console.log('error', e.target.error.code);
			}
			//読み込み後の処理
			reader.onload = function(e){
				outEle.append('<img src="'+e.target.result+'" />');
			};
			reader.readAsDataURL(files[i]);
		}
	}
	

FileReader を生成したら onload で読み込み後の処理をします。
ここでは画像のURLを扱ういたかったので readAsDataURL を使用しました。

テキストファイルの文字を表示する

次はテキストファイルの文字を表示してみます。

JavaScript

	for (var i=0; i<files.length; i++) {
		if (files[i].type === 'text/plain') {
			var reader = new FileReader();
			//エラー処理
			reader.onerror = function(e) {
				console.log('error', e.target.error.code);
			}
			//読み込み後の処理
			reader.onload = function(e){
				$('<div></div>').text(e.target.result).appendTo(outEle)
			};
			reader.readAsText(files[i], 'shift-jis');
		}
	}
	

画像の場合は readAsDataURL でしたが、テキストの場合は readAsText になります。
また、第２引数には文字コードを指定します。
指定しない場合にはソースの文字コードになるようです。

完成したコードです。

Sample File

参考サイト

【HTML5】File APIを使って、投稿された画像を即時表示する方法【小ネタ】 : アシアルブログ
IE10で動くHTML5アプリ実装例「File APIを利用したアプリ」：CodeZine