JS 35 - 用 input 選擇圖片後顯示預覽圖 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

Modern Web

JavaScript 從 50% 開始，打造函式庫不是問題！系列第 35 篇

JS 35 - 用 input 選擇圖片後顯示預覽圖

13th鐵人賽

Felix

2021-10-20 23:59:24

2782 瀏覽

分享至

大家好！

今天我們要實作的是，用 input 選擇圖片並在畫面上顯示預覽圖。
我們進入今天的主題吧！

程式碼

Felix('input[type="file"]').on('change', function () {
    if (!this.files[0]) return;

    const previewer = Felix('img');
    const reader = new FileReader();

    Felix(reader).on('loadend', function () {
        previewer.src = reader.result;
    });

    reader.readAsDataURL(this.files[0]);
});