html5の File API を使って、アップロード無しで画像プレビュー

html5


画像をプレビューするために、サーバへアップロードする必要がなくなります*1。

html

fileのアップロードフォームにonchangeを仕込んでおきます。
あとは、プレビュー表示用の要素だけ準備。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<form>
  <input type="file" name="file" onchange="preview(this)" />
</form>

<hr />
<b>preview:</b><br />
<div id="preview_field"></div>

</body>
</html>

javascript

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 />';
}

スバラシイ。

*1:Firefox 3.6で動作を確認