[jQuery] input type=”file”でプレビュー表示させる

Author Date

20151009_img

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>

当記事のサンプルはこちらです