angularjs 預覽圖片

一般我們在上傳檔案都是用 file input 上傳，在選擇檔案後通常只會顯示檔名
如果上傳的是圖檔又同時想要預覽選擇的圖片光用 file input 是無法實現的
以下就介紹一個簡便的方法來實現預覽圖片的效果

首先在 body 中加入 input 及 img 欄位

file input 用來選擇要預覽的圖片，img 用顯示被選的圖片
再來在 controller 中加入下列程式

這樣就可以顯示選擇的圖片了，這裡所使用的是 FileReader API 詳細可參考 MDN
reader.readAsDataURL 會返回以 "data:image/jpeg;base64," 開頭的 base64 字串
將此字串放進 img.src 中就可以顯示圖片了是不是很簡單啊 原始碼 Plunker 

執行結果