在現代web應用中，圖片的上傳是非常常見的需求。然而，上傳大量圖片可能會導致長時間的加載等待，尤其是在網絡速度較慢的情況下。為了解決這個問題，我們可以使用Ajax技術結合圖片壓縮來實現快速的多張圖片上傳。

使用Ajax進行多張圖片壓縮上傳的主要思路是，在客戶端對圖片進行壓縮，然后將壓縮后的圖片數據傳輸給服務器，服務器再進行解壓縮并保存圖片。這種方式可以大大減小圖片的文件大小，從而提高上傳速度。

下面以一個在線相冊應用為例，假設用戶可以一次性選擇多張圖片并上傳到相冊中。在使用傳統方式上傳圖片時，用戶選擇了10張圖片，在網絡較慢的情況下，可能需要數分鐘才能完成上傳。而使用Ajax進行圖片壓縮上傳后，可以極大地縮短上傳時間，提升用戶體驗。

$('#uploadButton').on('click', function() {
var files = $('#fileInput').prop('files');
if (files.length >0) {
var formData = new FormData();
for (var i = 0; i< files.length; i++) {
var file = files[i];
// 使用canvas對圖片進行壓縮
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = URL.createObjectURL(file);
img.onload = function() {
canvas.width = 100; // 設置壓縮后圖片的寬度為100
canvas.height = canvas.width * (img.height / img.width);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// 將壓縮后的圖片添加到表單數據中
var compressedFile = canvas.toDataURL('image/jpeg', 0.6);
formData.append('photos[]', compressedFile);
if (formData.getAll('photos[]').length === files.length) {
// 所有圖片壓縮后，通過Ajax發送表單數據
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 上傳成功的回調函數
},
error: function() {
// 上傳失敗的回調函數
}
});
}
}
}
}
});

以上代碼通過選擇圖片文件后，使用canvas對圖片進行壓縮。壓縮后的圖片通過FormData對象添加到表單數據中，并通過Ajax發送到服務器。

在服務器端，通過相應的后端語言處理接收到的壓縮圖片數據并保存。例如，在PHP中可以使用以下代碼:

$photos = $_FILES['photos'];
foreach ($photos['tmp_name'] as $index =>$tmpName) {
$destination = 'uploads/' . $photos['name'][$index];
move_uploaded_file($tmpName, $destination);
}

以上代碼通過$_FILES數組接收到壓縮后的圖片數據，并將其保存到服務器上的uploads目錄下。

使用Ajax進行多張圖片壓縮上傳可以極大地提高上傳速度，提升用戶體驗。通過壓縮圖片可以減小文件大小，從而減少帶寬消耗。然而，需要注意的是，壓縮后的圖片可能會降低圖片質量，因此在選擇壓縮比例時需要權衡好壓縮比例和圖片質量之間的關系。