JavaScript File APIを使ってアップロードフォームに画像プレビューを設置する

前回の続き。アップロードフォームで画像を選択すると、横に選択画像を表示するようにした。

成果物：upload.html (画像ファイルの選択でプレビューを表示)

メモ

ファイル選択ボタン(input type=”file”)のchangeイベントがトリガー
ファイルオブジェクトはdocument.getElementById(“image”).files[0]で取得できるが、jQueryなら$(‘#image’).prop(‘files’)[0]と書ける

$('#image').change(function() {
	var file = $(this).prop('files')[0];
	var fr = new FileReader();
	fr.onload = function() {
		$('#preview').attr('src', fr.result);	// 読み込んだ画像データをsrcにセット
	}
	fr.readAsDataURL(file);  // 画像読み込み
});

ソースコード
upload.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>スマホキャプチャーギャラリー</title>
</head>
<body>
	<a href="index.html">Home</a> | <a href="upload.html">アップロード</a> | <a href="ranking.html">人気順</a>  | <a href="latest.html">新着順</a>

	<p>アップロード画面[upload.html]：フォーム(プレビュー欲しい)、エラーチェック(必須項目、ファイル形式、ファイルサイズ、コメント上限)</p>

	<form action="upload.php" method="post" enctype="multipart/form-data">
		<table>
			<tr height="480">
			<td>
				<img src="dummycapture_320x480.png" id="preview" alt="preview" width="320" />
			</td>
			<td>
				<table>
					<tr>
						<td>画像：<input type="file" name="image" id="image" /></td>
					</tr>
					<tr>
						<td>名前：<input type="text" name="name" size="40" /></td>
					</tr>
					<tr>
						<td>OS：<select name="os">
						<option value="default">選択してください</option>
						<option value="iPhone">iPhone</option>
						<option value="Android">Android</option>
						</select></td>
					</tr>
					<tr>
						<td>コメント：<textarea id="" name="comment" rows="10" cols="30"></textarea></td>
					</tr>
					<tr>
						<td>編集・削除キー：<input type="text" id="updelkey" name="updelkey" size="20" /></td>
					</tr>
					<tr>
						<td><input type="submit" value="送信" /></td>
					</tr>
				</table>
			</td>
			</tr>
		</table>
	</form>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			// 編集・削除キーのデフォルト値
			var key = Math.floor(Math.random() * 9999);
			$('#updelkey').attr('value', key);

			// 画像プレビュー
			$('#image').change(function() {
				var file = $(this).prop('files')[0];
				var fr = new FileReader();
				fr.onload = function() {
					$('#preview').attr('src', fr.result);	// 読み込んだ画像データをsrcにセット
				}
				fr.readAsDataURL(file);  // 画像読み込み
			});
		});
	</script>
</body>
</html>

参考サイト