[Javascript] 筆記一下用法,input file 選取檔案後預覽圖片

2016-08-26

選取一個圖片檔案後,直接進行預覽,以前我都是傳到server 按下上傳後再做預覽,現在可以透過javascript 做到,這樣對使用者來說會更加的直覺看到選取圖片是否正確
14107795_10210384687240134_523340774573149763_o

function InputLoadImageToBindImageElement(inputEl, imgEl) {
 
    if (inputEl.files && inputEl.files[0]) {
        var reader = new FileReader();
 
        reader.onload = function (e) {
            $(imgEl).attr('src', e.target.result);
        }
 
        reader.readAsDataURL(inputEl.files[0]);
    }
}

使用方式:

HTML:

<img src="" id="image1"  />
<input type="file" name="name" id="iptImage1" value="" />
 

呼叫:

$("#iptImage1").change(function () {
          InputLoadImageToBindImageElement(this, $('#image1'));
});

sample:


當麻許的超技八 2014 | Donma Hsu Design.