JavaScript/ DOM操作 / イメージファイルプレビュー

JavaScript/ DOM操作 / イメージファイルプレビュー

アップロードしたい画像ファイルをプレビューしたい場合がある。 昔はサーバも含めたダイナミックな実装が必要だったが、今では非常に簡単にできるようになっている。

FileReader というクラスを使う。

このように input する部分と、プレビュー部分を作ってやり

<input id="hoge" type="file" />
<img id="piyo" src="" alt="ここに出る" />

このようにイベントにフックしておくとよい

document.addEventListener("DOMContentLoaded", function(e){
    var hoge = document.querySelector("#hoge");
    var piyo = document.querySelector("#piyo");
    var fr = new FileReader();  // ファイル読み込む君
    // ファイル選択ダイアログで選択した後の処理
    hoge.addEventListener("change", function(){
        var f = hoge.files[0];   // 選択したファイル情報を取得
        console.log(f.name);
        fr.readAsDataURL(f);     // ファイルを実際に読み込む(非同期)
    });
    // ファイルを読み(非同期)が完了した後の処理
    fr.addEventListener("load", function(){
        piyo.src = fr.result;  // 入れてやる
    });
});
javascript/ope/dom_ope/image_file_preview.txt · 最終更新: 2020-09-30 16:21 by ore