スマートフォンで撮影した写真をjavascriptのFile APIでinputへセット

iOS6のSafariから対応の、HTML5のFileReaderをつかって
スマートフォンのカメラを起動し、撮影した画像を
<input type=”file”>へセットしたり
<img>としてプレビューしたりするサンプルを作ってみました。

サンプル

今回は、jQueryなしで組んでみました。

<div class="console">
	<div class="button">&#xe075;</div>
	<input id="addImage" type="file" accept="image/*">
</div>
<div Id="preview"></div>

window.onload = function(){
	var $addImage = document.getElementById("addImage"); // input type="file" の要素
	var $preview = document.getElementById("preview"); // プレビューのimgを生成するエリア
	
	$addImage.addEventListener("change", function(){ // input要素が変更されたとき実行
	
		$preview.removeChild($preview.childNodes[0]); // 既にあるプレビュー用imgを削除
		
		var $file = $addImage.files[0]; // inputで選択された要素
		var reader = new FileReader(); // FileReaderをインスタンス化
		reader.readAsDataURL($file);
		
		reader.onload = function(){
			var $img = new Image();
			$img.src = reader.result;
			$img.onload = function(){
				$preview.appendChild($img);
			}
		}

	});
}

Pocket

Share on Tumblr

関連記事