在現(xiàn)如今的互聯(lián)網(wǎng)時(shí)代，圖片已經(jīng)成為我們?nèi)粘Ｉ詈凸ぷ髦胁豢苫蛉钡囊徊糠帧Ｈ欢瑐鬟f多張圖片一直以來(lái)都是一個(gè)棘手的問(wèn)題。傳統(tǒng)的網(wǎng)頁(yè)傳輸方式，如無(wú)刷新提交表單或者使用iframe標(biāo)簽，無(wú)法高效地傳遞多張圖片。然而，使用AJAX（Asynchronous JavaScript and XML）技術(shù)可以輕松地解決這個(gè)問(wèn)題。本文將介紹如何通過(guò)AJAX傳遞多張圖片，并通過(guò)舉例說(shuō)明其實(shí)用性。
AJAX是一種在Web應(yīng)用程序中，能夠異步更新頁(yè)面的技術(shù)。它通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，實(shí)現(xiàn)了局部更新，提高了用戶體驗(yàn)。在傳遞多張圖片的情況下，AJAX的異步性使得用戶的等待時(shí)間減少，并且可以實(shí)時(shí)顯示傳輸?shù)倪M(jìn)度和結(jié)果。
假設(shè)我們有一個(gè)圖片上傳的場(chǎng)景，用戶可以選擇多張圖片，然后將它們上傳到服務(wù)器保存。在這個(gè)場(chǎng)景中，我們可以使用AJAX來(lái)實(shí)現(xiàn)逐張圖片的傳輸。
首先，我們需要一個(gè)可以處理AJAX請(qǐng)求的服務(wù)器端。以下是一個(gè)簡(jiǎn)單的PHP代碼片段，用于處理圖片上傳的請(qǐng)求：
<?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];
// 保存圖片到服務(wù)器或者進(jìn)行其他操作
}
}
?><!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) {
// 處理服務(wù)器返回的響應(yīng)數(shù)據(jù)
},
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;
// 實(shí)時(shí)顯示傳輸進(jìn)度
}
}, false);
return xhr;
}
});
});
});
</script>
</head>
<body>
<form enctype="multipart/form-data">
<input type="file" name="images[]" multiple />
<input type="submit" value="上傳" />
</form>
</body>
</html>