在現如今的互聯網時代，圖片已經成為我們日常生活和工作中不可或缺的一部分。然而，傳遞多張圖片一直以來都是一個棘手的問題。傳統的網頁傳輸方式，如無刷新提交表單或者使用iframe標簽，無法高效地傳遞多張圖片。然而，使用AJAX（Asynchronous JavaScript and XML）技術可以輕松地解決這個問題。本文將介紹如何通過AJAX傳遞多張圖片，并通過舉例說明其實用性。
AJAX是一種在Web應用程序中，能夠異步更新頁面的技術。它通過在后臺與服務器進行少量數據交換，實現了局部更新，提高了用戶體驗。在傳遞多張圖片的情況下，AJAX的異步性使得用戶的等待時間減少，并且可以實時顯示傳輸的進度和結果。
假設我們有一個圖片上傳的場景，用戶可以選擇多張圖片，然后將它們上傳到服務器保存。在這個場景中，我們可以使用AJAX來實現逐張圖片的傳輸。
首先，我們需要一個可以處理AJAX請求的服務器端。以下是一個簡單的PHP代碼片段，用于處理圖片上傳的請求：
<?php
if(isset($_FILES['images'])) {
$images = $_FILES['images'];
foreach($images['tmp_name'] as $key => $tmp_name) {
$file_name = $images['name'][$key];
$file_tmp = $images['tmp_name'][$key];
$file_type = $images['type'][$key];
$file_error = $images['error'][$key];
// 保存圖片到服務器或者進行其他操作
}
}
?><!DOCTYPE html>
<html>
<head>
<title>多張圖片上傳</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$('form').on('submit', function(e) {
e.preventDefault();
var formData = new FormData(this);
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(response) {
// 處理服務器返回的響應數據
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
},
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(e) {
if(e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
// 實時顯示傳輸進度
}
}, false);
return xhr;
}
});
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data">
<input type="file" name="images[]" multiple />
<input type="submit" value="上傳" />
</form>
</body>
</html>