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

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

サンプル

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

<br />
&lt;div class=&quot;console&quot;&gt;<br />
	&lt;div class=&quot;button&quot;&gt;&amp;#xe075;&lt;/div&gt;<br />
	&lt;input id=&quot;addImage&quot; type=&quot;file&quot; accept=&quot;image/*&quot;&gt;<br />
&lt;/div&gt;<br />
&lt;div Id=&quot;preview&quot;&gt;&lt;/div&gt;<br />

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

関連記事