使用FileReader實現前端預覽所選圖片

需求描述

在瀏覽器環境下進開發網站（也就是B/S架構的應用），獲取到當前設備上的圖片後，但願能夠在上傳到服務器前簡單預覽一下圖片內容。

具體實現

主要代碼

html 部分

<input type="file" id="check_file" />
<img src="" id="preview_image" />

javascript 部分

var fileElem = document.getElementById('check_file');
var imgElem = document.getElementById('preview_image');
fileElem.addEventListener('change', function (event) {
    //TODO 預覽
    var target = event.target;
});

直接使用圖片地址

imgElem.src = target.value;

結果信息：

Not allowed to load local resource: file:///xxx

意味着不能經過圖片文件在設備上的路徑，直接訪問這個圖片。靜態html在本地測試時，能夠經過安裝插件等方式臨時解決這個阻礙。可是實際生產中html文件一般是在服務器上，而非客戶端設備上，那麼這個方案是行不通的。

將圖片轉爲base64編碼

若是圖片不是特別大，能夠嘗試將其轉爲base64編碼來實現預覽的效果，這裏使用 FileReader 這個API來實現。

var fileReader = new FileReader();
fileReader.onload = function (readEvent) {
    imgElem.src = readEvent.target.result;
};

參考文檔

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
• https://developer.mozilla.org/en-US/docs/Web/API/FileReader