[JavaScript] 前端上傳圖片時顯示預覽圖

前端常常有需求要選擇圖片後顯示預覽圖，這邊跟大家分享兩個取得預覽圖的方式。

方法一 FileReader

const file = this.files[0];

const fr = new FileReader();
fr.onload = function (e) {
    $('img').attr('src', e.target.result);
};

// 使用 readAsDataURL 將圖片轉成 Base64
fr.readAsDataURL(file);

範例：https://jsbin.com/qaxofiwaki/1/edit?html,output

方法二 URL.createObjectURL

const file = this.files[0];
const objectURL = URL.createObjectURL(file);

$('img').attr('src', objectURL);

範例：https://jsbin.com/fefaveveqo/1/edit?html,output