ファイルアップロード時にプレビューする機能の作り方

ファイルアップロード時にプレビューする機能の作り方です。
画像の作り方はdataURLとblobの2種類紹介します。

HTML

HTMLはシンプルです。

1. HTMLはinputタグでアップロードできるようにします
2. アップロードした画像をプレビューするimgタグを用意します

<input type="file" id="file"/>                    
<img id="img">

JavaScript(DataURL)

1. inputタグに値が変更されたときに動くようにイベントを設定します
2. ファイルの内容を読み取るためFileReaderを用意します
3. imgタグのsrc属性を書き換えます
4. readAsDataURLを使ってDataURLの画像を生成します

window.addEventListener("load", function () {
    //ファイルアップロード時
    document.getElementById("file").addEventListener('change', (e)=>{
        let fileReader = new FileReader();
        fileReader.onload = (function () {
            document.getElementById("img").src = fileReader.result;
        });
        //画像がアップロードされている場合
        if(e.target.files.length > 0){
            fileReader.readAsDataURL(e.target.files[0]);
        }
    })
});

JavaScript(blob)

1. inputタグに値が変更されたときに動くようにイベントを設定します
2. URL.createObjectURLを使ってblobの画像を生成し、imgタグのsrc属性を書き換えます

window.addEventListener("load", function () {
    //ファイルアップロード時
    document.getElementById("file").addEventListener('change', (e)=>{
        //画像がアップロードされている場合
        if(e.target.files.length > 0 ){
            document.getElementById("img").src =  URL.createObjectURL(e.target.files[0]);
        }
    })
});

以上です。
実装する環境で使い分けてみてください！