【スニペット】input type="file"から画像を選択したときに、サムネイルを表示させる

2018-09-15T22:41:58+09:00

FileRearderオブジェクトを使うと、画像パスを取得しなくても良い

オブジェクトのresultプロパティに、Data URL形式のデータが入っているため。
（readAsDataURLメソッドで取得可能）

バイナリファイルを上記の方法で取得可能なために実現できる。

以下、コードを記述。
index.html




    
    
    music library
    
    


    買ったCDをビジュアル的に管理したい

main.js

const ImgFile = document.getElementById('image_file');
const BtnShow = document.getElementById('btn_to_show_img');
BtnShow.addEventListener('click', (res) => {

    // FileReaderオブジェクトを使う
    const input = ImgFile.files[0];
    const reader = new FileReader();

    console.table(reader);
    reader.addEventListener('load', (e) => {

        // imgタグを作成する
        const img_anchor = document.createElement('img');
        img_anchor.src = reader.result;
        const list = document.getElementById('list');
        list.appendChild(img_anchor);
    }, true);

    // エラーハンドリング
    reader.addEventListener('error', () => {
        console.error(reader.error.message);
    }, true);
    reader.readAsDataURL(input);
    // 画像を表示させるごとにvalueを初期化する
    ImgFile.value = "";
}, true);

キココの投稿 - Crieit

【スニペット】input type="file"から画像を選択したときに、サムネイルを表示させる

FileRearderオブジェクトを使うと、画像パスを取得しなくても良い

買ったCDをビジュアル的に管理したい