iT邦幫忙

2021 iThome 鐵人賽

1
Modern Web

JavaScript 從 50% 開始,打造函式庫不是問題!系列 第 35

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

大家好!

今天我們要實作的是,用 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]);
});

實測

範例連結製作中。


差不多也到尾聲了。
如果對文章有任何疑問,也歡迎在下方提問和建議!
我是 Felix,我們明天再見!


上一篇
JS 34 - 實作 Medium 的漸進式圖片載入效果
下一篇
JS 36 - 新增並記錄網頁的偏好顏色模式
系列文
JavaScript 從 50% 開始,打造函式庫不是問題!46

尚未有邦友留言

立即登入留言