AJAX上傳圖片詳解

一、AJAX上傳圖片簡介

AJAX上傳圖片是一種無需刷新頁面即可上傳圖片的技術。它簡化了上傳圖片的流程，提高了用戶體驗，同時也減輕了伺服器壓力。下面將介紹AJAX上傳圖片的實現方式和相關細節。

二、AJAX上傳圖片的實現方式

首先，需要在HTML頁面中添加一個input標籤，用於選擇要上傳的圖片。然後，通過JavaScript代碼，獲取到input標籤的值，並使用AJAX技術將圖片上傳到伺服器。

具體實現方式如下：

//HTML代碼
<input type="file" id="image" name="image">

//JavaScript代碼
var input = document.getElementById('image');
var file = input.files[0];
var formData = new FormData();
formData.append('image', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(formData);

上述代碼片段中，首先使用document.getElementById()方法獲取input標籤元素，進而獲取上傳的圖片文件。接著，創建FormData對象並將文件添加進去，從而實現了將文件上傳到伺服器的目的。最後，使用XMLHttpRequest對象進行非同步上傳，當上傳成功後，列印伺服器返回的響應信息。

三、AJAX上傳圖片的相關細節

1. 顯示上傳進度條

為了提高用戶體驗，我們通常會在上傳圖片的過程中顯示進度條。要實現進度條，需要使用XMLHttpRequest對象的upload屬性獲取上傳過程的狀態，並在相應的狀態下更新進度條。

具體實現方式如下：

//HTML代碼
<progress id="progress" value="0" max="100"></progress>

//JavaScript代碼
var input = document.getElementById('image');
var file = input.files[0];
var formData = new FormData();
formData.append('image', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function(event) {
  var progress = document.getElementById('progress');
  progress.value = Math.round(event.loaded / event.total * 100);
};
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(formData);

上述代碼片段中，使用progress標籤顯示進度條，使用XMLHttpRequest對象的upload屬性監聽上傳過程中狀態的變化，並在狀態響應的回調函數中更新進度條的值。

2. 壓縮上傳的圖片

在計算機上選擇的圖片文件可能會很大，在上傳之前需要對其進行壓縮，以減小上傳時間和佔用伺服器存儲空間。

可以使用canvas的toDataURL()方法將圖片壓縮為Base64編碼格式，從而縮小圖片大小。具體實現方式如下：

//HTML代碼
<input type="file" id="image" name="image">

//JavaScript代碼
var input = document.getElementById('image');
var file = input.files[0];

var img = new Image();
img.onload = function() {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = 200;
  canvas.height = img.height * canvas.width / img.width;
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  var dataURL = canvas.toDataURL('image/jpeg');
  var blobData = dataURLtoBlob(dataURL);
  var formData = new FormData();
  formData.append('image', blobData);

  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/upload', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log(xhr.responseText);
    }
  };
  xhr.send(formData);
};
img.src = URL.createObjectURL(file);

function dataURLtoBlob(dataURL) {
  var arr = dataURL.split(',');
  var mime = arr[0].match(/:(.*?);/)[1];
  var bstr = atob(arr[1]);
  var n = bstr.length;
  var u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

上述代碼片段中，首先創建Image對象並將其源屬性設置為選擇的圖片，用於獲得圖片的原始大小。接著，創建Canvas對象並將圖片繪製在畫布上。通過設置Canvas對象的寬度和高度，可以縮放圖片並壓縮尺寸。使用toDataURL()方法將圖片轉換為Base64編碼格式，並將其轉換為Blob格式的數據用於上傳。最後，使用XMLHttpRequest對象進行非同步上傳，當上傳成功後，列印伺服器返回的響應信息。

3. 獲取已上傳的圖片

在上傳完成後，需要獲取已上傳的圖片進行展示或其他操作。可以通過伺服器返回的URL地址獲取。同時，為了防止重複上傳相同的圖片，可以使用緩存機制來存儲URL地址，從而避免重複上傳。

//伺服器返回的響應信息
{
  "code": 0,
  "data": {
    "url": "http://example.com/upload/image.jpg"
  }
}

//JavaScript代碼
var input = document.getElementById('image');
var file = input.files[0];
var key = file.name;

var cache = JSON.parse(localStorage.getItem('cache')) || {};
if (cache[key]) {
  console.log(cache[key]);
  return;
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    if (response.code === 0) {
      var url = response.data.url;
      console.log(url);
      cache[key] = url;
      localStorage.setItem('cache', JSON.stringify(cache));
    }
  }
};
xhr.send(formData);

上述代碼片段中，首先獲取要上傳的圖片名稱作為緩存的鍵值。接著，從本地存儲中獲取緩存對象。如果該圖片已上傳並被緩存，則直接使用緩存的URL地址，否則，上傳該圖片並將其URL地址存入緩存中。最後，列印URL地址和緩存對象。

四、總結

本文介紹了AJAX上傳圖片的實現方式和相關細節，包括上傳進度條、壓縮上傳的圖片和獲取已上傳的圖片。AJAX上傳圖片是一種無需刷新頁面即可上傳圖片的技術，它可以提高用戶體驗和減輕伺服器壓力。