以縮圖預覽上傳圖片

Steven LIU — Tue, 03 Oct 2017 06:26:42 +0000

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

變成：

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

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

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

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

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

function openFile(event){
  var input = event.target; //取得上傳檔案
  var reader = new FileReader(); //建立FileReader物件

  reader.readAsDataURL(input.files[0]); //以.readAsDataURL將上傳檔案轉換為base64字串

  reader.onload = function(){ //FileReader取得上傳檔案後執行以下內容
    var dataURL = reader.result; //設定變數dataURL為上傳圖檔的base64字串
    $('#output').attr('src', dataURL).show(); //將img的src設定為dataURL並顯示
  };
}

4. 結果如下：

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

好書介紹－HTML & CSS：網站設計建置優化之道

Steven LIU — Sun, 09 Jul 2017 16:03:55 +0000

作者：Jon Duckett
譯者：張雅芳
出版社：碁峰

這本書用深入淺出且條理分明的方式，將打造網站所需的最基本html、css語法與RWD框架作了詳細介紹，非常適合初學者打基礎。我很幸運在剛接觸網頁語言不久就讀了這本書，它不僅幫助我建立起正確的概念，即便是對html與css已經相對熟稔的現在，這本書我還是常常查閱，有空的時候甚至會重看一次、把部分逐漸忘記的觀念重新複習一下。