如何將圖片預覽上傳及儲存在資料庫中

發表於 更新於 Disqus：

傳統的的圖片上傳方式， 通常是需要把圖片上傳到後端的伺服器。從伺服器取得圖片的 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 的格式

1
data:[<MIME類型>][;charset=<charset>][;編碼方法],<編碼資料>

在這裡編碼方法為 Base64 。一個 DataURL 的範例如下：
1
data:image/png;base64,iVBORw0KGgoAAAANSUhEU…..dAAAAAElFTkSuQmCC

接下來是我們的程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>

<head>
<title>Image Preview Upload</title>
</head>

<body>
<form method="post" action="image_proc.php">
<input type="hidden" name="imagestring">
<input accept="image/*" id="previewImage" type="file">
<input type="submit" name="submit" id="submit"  />
<br />
<img id="show_image" src="">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

var imageProc = function (input) {
 if (input.files && input.files[0]) {
  // 建立一個 FileReader 物件
   var reader = new FileReader();

  // 當檔案讀取完後，所要進行的動作
  reader.onload = function (e) {
    // 顯示圖片
     $('#show_image').attr("src", e.target.result).css("height", "500px").css("width", "500px");
    // 將 DataURL 放到表單中
    $("input[name='imagestring']").val(e.target.result);
   };
  reader.readAsDataURL(input.files[0]);

 }
}


$(document).ready(function() {
// 綁定事件
 $("#previewImage").change(function () {
   imageProc(this);
 });

});

</script>
</body>

資料庫的儲存

在這個範例中，我們使用 MYSQL 資料庫，而儲存圖片的資料型態，則是使用 BLOG 。

以下為資料庫的 schema 

1
2
3
4
5
6
CREATE TABLE preview_image (
   id int(11) NOT NULL AUTO_INCREMENT,
   image blob,
   PRIMARY KEY(id)
);

後端伺服器的處理

在這個範例中，我們使用 PHP 作為後端伺服器的處理。它會接收前端傳來的表單，並把圖片儲存進入資料庫中。

我們直接來看程式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 建立資料庫連線
$conn = mysqli_connect($db_host,$db_user,$db_passwd,$db_name);
mysqli_set_charset($cc,"utf8");
if (mysqli_connect_errno($conn)) {
 echo mysqli_connect_error();
}

// 接收前端傳來的 DataURL 字串
$imagestring = trim($_REQUEST["imagestring"]);

// 解析 DataURL
$token = explode(',', $bank_image);
// 取出圖片的資料並將 base64 還原成二進位格式
$image = base64_decode($token[1]);

// 以下為 PHP 將 Blob 放入Mysql的方法
$null = NULL;
$sql = 'insert into preview_image(image) values(?)';
$stmt = mysqli_prepare($conn, $sql);
$stmt->bind_param('b', $null);
$stmt->send_long_data(0, $image);
$success = $stmt->execute();
$stmt->close();