type
status
date
slug
summary
tags
category
icon
password
傳統的的圖片上傳方式， 通常是需要把圖片上傳到後端的伺服器。再從伺服器取得圖片的URL，放入
img 元素中，才能顯示圖片的預覽。不過在 HTML5之下，我們可以不用上傳到後端伺端器就可以實現圖片的預覽。 HTML5有提供一個新的物件 FileReader， 可以讓我們直接從頁面中讀取文件。我們在這要建立一個簡單的範例：在選擇一張圖檔後，直接在頁面上預覽。等使月手按下確定後，才會把圖檔傳送到後端伺服器進行處理，然後再儲存至資料庫。
圖片預覽
首先，我們先來了解 HTML5 FileReader 物件。FileReader 有提供以下幾個方法來存取檔案：
- readAsArrayBuffer() - 將檔案以物件 ArrayBuffer 儲存在
FileReader.result.
- readAsDataURL() - 將檔案以DataURL 的格式儲存在
FileReader.result.
- readAsText() - 將檔案以文字的格式儲存在
FileReader.result.
在圖片預覽中，我們會使用
FileReader.readAsDataURL()。 將圖片轉換成 DataURL 的格式再放入 img 的屬性 src。DataURL 的格式
在這裡編碼方法為
Base64。一個DataURL的範例如下：接下來是前端的程式碼：
資料庫的儲存
在這個範例中，我們使用 MYSQL 資料庫，而儲存圖片的資料型態，則是使用
BLOG。以下為資料庫的
schema後端伺服器的處理
在這個範例中，我們使用 PHP 作為後端伺服器的處理。它會接收前端傳來的表單，並把圖片儲存進入資料庫中。
我們直接來看程式：
- 作者:fivewillow
- 連結:https://stream-notes.fivewillows.cc/article/preview-before-upload-using-html5-and-backend-process
- 著作權:本文採用 CC BY-NC-SA 4.0 許可協議，轉載請註明出處。