以縮圖預覽上傳圖片

在製作填寫資料的頁面時，常常會需要使用到圖片上傳的功能。預設的情況下，點選圖片後在上傳按鈕的旁邊會顯示圖檔名稱：

變成：

不過，如果能再增加一個縮圖的話，相信就更能減少傳錯圖檔的風險了。

要達到預覽縮圖的功能其實非常簡單，只需幾行的javascript就能快速達成（本例搭配jQuery）：

1. 建立一個img作為縮圖的容器，設定好id並以display:none隱藏起來：

[pastacode lang=”markup” manual=”%3Cimg%20id%3D%22output%22%20height%3D%22200%22%20style%3D%22display%3Anone%22%3E” message=”準備一個隱藏的img” highlight=”” provider=”manual”/]

2. 建立一個input，設定上傳圖片時執行自訂函數openFile()：

[pastacode lang=”markup” manual=”%3Cinput%20type%3D%22file%22%20onchange%3D%22openFile(event)%22%3E” message=”選好檔案時執行openFile自訂函數” highlight=”” provider=”manual”/]

3. 準備自訂函數openFile()：以javascript讀取檔案、將檔案轉換為base64的字串，再將字串塞在上面img的src裡：

[pastacode lang=”javascript” manual=”function%20openFile(event)%7B%0A%20%20var%20input%20%3D%20event.target%3B%20%2F%2F%E5%8F%96%E5%BE%97%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%0A%20%20var%20reader%20%3D%20new%20FileReader()%3B%20%2F%2F%E5%BB%BA%E7%AB%8BFileReader%E7%89%A9%E4%BB%B6%0A%0A%20%20reader.readAsDataURL(input.files%5B0%5D)%3B%20%2F%2F%E4%BB%A5.readAsDataURL%E5%B0%87%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E8%BD%89%E6%8F%9B%E7%82%BAbase64%E5%AD%97%E4%B8%B2%0A%0A%20%20reader.onload%20%3D%20function()%7B%20%2F%2FFileReader%E5%8F%96%E5%BE%97%E4%B8%8A%E5%82%B3%E6%AA%94%E6%A1%88%E5%BE%8C%E5%9F%B7%E8%A1%8C%E4%BB%A5%E4%B8%8B%E5%85%A7%E5%AE%B9%0A%20%20%20%20var%20dataURL%20%3D%20reader.result%3B%20%2F%2F%E8%A8%AD%E5%AE%9A%E8%AE%8A%E6%95%B8dataURL%E7%82%BA%E4%B8%8A%E5%82%B3%E5%9C%96%E6%AA%94%E7%9A%84base64%E5%AD%97%E4%B8%B2%0A%20%20%20%20%24(‘%23output’).attr(‘src’%2C%20dataURL).show()%3B%20%2F%2F%E5%B0%87img%E7%9A%84src%E8%A8%AD%E5%AE%9A%E7%82%BAdataURL%E4%B8%A6%E9%A1%AF%E7%A4%BA%0A%20%20%7D%3B%0A%7D” message=”縮圖處理程式” highlight=”” provider=”manual”/]

4. 結果如下：

Voilà！顯示縮圖就是這麼簡單！