本文介紹了一個基于ajax的圖片上傳demo，通過該demo可以實現圖片的異步上傳功能。通過該demo，用戶可以選擇本地的圖片文件并進行上傳，上傳過程中無需刷新頁面，實時顯示上傳進度和上傳結果。

上傳原理

該demo使用了ajax技術實現圖片的異步上傳。上傳過程中，將圖片文件轉換為二進制數據，通過ajax將數據發送到服務器端。服務器端接收數據后，將二進制數據保存為圖片文件。

實現過程

首先，我們需要一個文件上傳表單，如下所示：

<form id="uploadForm" enctype="multipart/form-data" method="post"><input type="file" name="file" id="file" /><input type="submit" value="上傳" /></form>

用戶在該表單中選擇本地的圖片文件后，點擊提交按鈕進行上傳。接下來，我們使用ajax進行異步上傳。

在JavaScript代碼中，首先獲取表單元素和文件輸入框：

var form = document.getElementById("uploadForm");
var fileInput = document.getElementById("file");

接著，監聽表單的提交事件，并通過ajax發送圖片文件數據到服務器端：

form.addEventListener("submit", function(event) {
event.preventDefault();
var formData = new FormData();
formData.append("file", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var progress = Math.round((e.loaded / e.total) * 100);
console.log(progress + "% uploaded");
}
};
xhr.onload = function() {
if (xhr.status === 200) {
console.log("Upload successful");
} else {
console.log("Error during upload");
}
};
xhr.send(formData);
});

上傳進度顯示

為了實時顯示上傳進度，我們監聽xhr.upload的progress事件。在該事件的回調函數中，我們計算已上傳的數據比例，并將其展示給用戶。

在上述代碼中，我們通過xhr.upload.onprogress事件監聽上傳進度，并計算已上傳數據的比例。然后，我們使用console.log將上傳進度輸出到控制臺，你也可以將進度顯示在頁面上的某個區域。

上傳結果顯示

上傳完成后，我們需要展示上傳結果反饋給用戶。在上述代碼中，我們通過xhr.onload事件監聽上傳完成的回調函數。在該函數中，我們根據xhr的狀態碼判斷上傳結果，并將結果展示給用戶。

根據上述代碼中的邏輯，如果xhr的狀態碼為200，表示上傳成功；如果狀態碼不為200，表示上傳失敗。我們可以根據這些狀態碼自定義不同的提示信息，以便更好地反饋給用戶。

總結

通過以上步驟，我們實現了一個基于ajax的圖片上傳demo。該demo可以實現圖片的異步上傳，上傳過程中實時顯示上傳進度和上傳結果。用戶可以通過該demo方便地上傳圖片文件，提升了用戶的使用體驗。