前言

最近在專案上加一個圖片裁剪上傳的功能，用的是cropper外掛，注意到選擇本地圖片後就會有預覽效果，這裡整理一下這種預覽效果的實現原理；

實現原理

通過input的 type = file屬性和window的內建FileReader物件，利用FileReader物件的readAsDataURL方法，把圖片資料轉成base64字串資料，然後把這個base64字串資料賦值給一個圖片標籤的src。

虛擬碼

//input標籤，獲取本地圖片
<input type="file" onchange="uploadImg(this)" accept="image/*"/>

//預覽圖片標籤
 

 <img id="viewImg"/>


 function uploadImg(fileDom) {
    //取到file檔案的本地路徑，就是你電腦上的儲存路徑
    console.log(fileDom.value);

    // 獲取圖片資料物件
    var file = fileDom.files[0];

    // 獲取圖片名字
    console.log(file.name); 

    // 獲取圖片檔案大小,單位為byte
    console.log(file.size);

    var reader = new FileReader();
    reader.readAsDataURL(file
 
);

    //確保檔案成功獲取，base64資料量比較大
    reader.onload = function (event) {
        var e = event || window.event
        var img = document.getElementById("viewImg");
        img.src = e.target.result;
        //或者 img.src = this.result; 因為e.target == this
    }
}

知識延伸

FileReader除了readAsDataURL方法之外，還有另外兩個比較重要的方法，分別為readAsBinaryString 將選擇的檔案讀取成二進位制和readAsText將選擇的檔案讀取成文字格式 ；

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：[email protected]