iOS6のSafariから対応の、HTML5のFileReaderをつかって
スマートフォンのカメラを起動し、撮影した画像を
<input type=”file”>へセットしたり
<img>としてプレビューしたりするサンプルを作ってみました。
今回は、jQueryなしで組んでみました。
<div class="console"> <div class="button"></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); } } }); }