input type=”file”でサーバにアップロードする前に画像をさせる、jQueryを利用したサンプル。
以下のブログを参考にさせていただいたきました
input type=”file”で画像アップロード前にプレビュー表示(jQuery) | thinking now…
追加で、画像の名前、ファイルタイプ、ファイルサイズを取得できるようにしています。画像のサイズや形式を指定する際に便利です。
function preview(ele) { if (!ele.files.length) return; // ファイル未選択 var file = ele.files[0]; if (!/^image\/(png|jpeg|gif)$/.test(file.type)) return; // typeプロパティでMIMEタイプを参照 var img = document.createElement('img'); var fr = new FileReader(); fr.onload = function() { img.src = fr.result; // 読み込んだ画像データをsrcにセット document.getElementById('preview_field').appendChild(img); } fr.readAsDataURL(file); // 画像読み込み // 画像名・MIMEタイプ・ファイルサイズ document.getElementById('preview_field').innerHTML = 'file name: ' + file.name + '<br />' + 'file type: ' + file.type + '<br />' + 'file size: ' + file.size + '<br />'; }
htmlのソース
<form> <input type="file" name="file" onchange="preview(this)" /> </form> <div> <p>preview:</p> <p id="preview_field"></p> </div>