超自己満足プログラミング このページをアンテナに追加 RSSフィード

2010-05-06

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


画像プレビューするために、サーバアップロードする必要がなくなります*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 />';
}

スバラシイ。

*1Firefox 3.6で動作を確認

jj 2014/01/12 23:29 ファイルを選択を繰り返しすると前に選択した画像がそのまま残ってしまいますよ。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証