AJAX（Asynchronous JavaScript and XML）是一種用于創建快速響應的Web應用程序的技術。它允許通過異步請求從服務器獲取數據，而不會導致整個頁面的刷新。在Web開發中，有時需要從前端將大型二進制數據（如圖片或視頻）上傳到服務器。這時可以使用AJAX提交Blob對象來實現，從而提供更流暢和用戶友好的體驗。
使用AJAX提交Blob對象的一個常見應用場景是圖片上傳。假設我們有一個簡單的表單，其中包含一個文件選擇框和一個上傳按鈕。用戶選擇圖片后，點擊上傳按鈕，前端代碼將使用AJAX請求將該圖片上傳到服務器。
<html>
<body>
<form id="uploadForm">
<input type="file" id="imageInput" accept="image/*" />
<button type="button" id="uploadButton">上傳</button>
</form>
<script>
var uploadButton = document.getElementById('uploadButton');
uploadButton.addEventListener('click', function() {
var fileInput = document.getElementById('imageInput');
var file = fileInput.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.send(formData);
});
</script>
</body>
</html>在上面的代碼中，我們首先為上傳按鈕添加了一個點擊事件監聽器。當用戶點擊上傳按鈕時，會執行函數，其中實現了以下步驟：
1. 獲取文件對象：使用元素的files屬性獲取用戶選擇的文件對象，并將其賦值給file變量。
2. 創建FormData對象：使用FormData構造函數創建一個空的FormData對象，我們將要向其中追加文件對象。
3. 追加文件對象：使用append()方法將文件對象添加到FormData對象中。這里我們使用'image'作為鍵名，但實際上可以根據需求自定義。
4. 發送AJAX請求：創建一個XMLHttpRequest對象xhr，并使用open()方法指定請求的類型、URL和是否異步。接下來，設置onreadystatechange事件監聽器，當請求狀態改變時執行函數。最后，使用send()方法發送請求，以FormData對象作為參數。
當請求完成時（readyState為4）并且服務器返回200狀態碼時，我們可以執行一些上傳成功后的處理邏輯，比如顯示上傳成功的提示或刷新頁面。
通過使用AJAX提交Blob對象，我們可以實現圖片上傳等功能，而無需整體刷新頁面。這使得用戶交互更加流暢且響應更快速。此外，還可以根據具體需求在服務器端對接收到的Blob對象進行進一步處理，如生成縮略圖或保存到數據庫中。