本文將介紹如何使用Ajax上傳多個文件給PHP。在現代web應用程序中，文件上傳是常見的功能之一。傳統的文件上傳方式需要刷新整個頁面才能完成，這會給用戶帶來困擾。使用Ajax技術可以在不刷新頁面的情況下進行文件上傳，提高用戶體驗。
假設我們的網站需要實現一個多圖片上傳功能。用戶可以一次選擇并上傳多個圖片。當用戶點擊上傳按鈕后，選中的圖片將會被以Ajax的方式傳遞給PHP服務器端進行處理。在上傳過程中，用戶可以繼續瀏覽和操作網站的其他頁面。
下面是一個簡單的HTML表單，其中包含一個input[type="file"]用于選擇文件和一個按鈕用于觸發上傳操作：
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <form id="uploadForm" action="" method="post" enctype="multipart/form-data"> <input type="file" name="files[]" multiple /> <button type="button" onclick="uploadFiles()">上傳</button> </form> </body> </html>
接下來，我們需要編寫一段JavaScript代碼來處理Ajax上傳操作。這里我們使用jQuery來簡化操作。在上傳之前，我們需要監聽文件input的change事件，以便獲取用戶選擇的文件列表。然后，將這些文件列表傳遞給以Ajax方式提交表單的方法，如下所示：
<script>
function uploadFiles() {
var files = $("input[type='file']")[0].files;
var formData = new FormData();
for (var i = 0; i< files.length; i++) {
formData.append('files[]', files[i]);
}
$.ajax({
url: 'upload.php',
type: 'post',
data: formData,
contentType: false,
processData: false,
success: function(response) {
alert('文件上傳成功！');
},
error: function(xhr, status, error) {
alert('文件上傳失敗！');
}
});
}
</script>在上面的代碼中，首先獲取了用戶選擇的文件列表，并使用FormData對象創建一個表單數據對象。然后，通過循環將每個文件添加到formData中。接下來，使用Ajax發起POST請求，將formData作為data參數傳遞給服務器端的upload.php腳本進行處理。
最后，我們在服務器端編寫upload.php來處理文件上傳操作。
<?php
if (isset($_FILES['files'])) {
$uploadedFiles = $_FILES['files'];
for ($i = 0; $i< count($uploadedFiles['name']); $i++) {
$name = $uploadedFiles['name'][$i];
$tmpName = $uploadedFiles['tmp_name'][$i];
move_uploaded_file($tmpName, 'upload/' . $name);
}
echo '文件上傳成功！';
} else {
echo '沒有選擇要上傳的文件！';
}
?>在upload.php中，我們首先判斷是否存在名為files的$_FILES數組。如果存在，則獲取到用戶上傳的文件列表，并使用move_uploaded_file函數將文件移動到指定目錄（這里是upload目錄）。最后，我們通過echo語句輸出上傳成功的消息給前端。
綜上所述，我們通過使用Ajax上傳多個文件給PHP，實現了在不刷新頁面的情況下進行文件上傳的功能。用戶可以方便地選擇和上傳多個文件，并在上傳過程中繼續瀏覽和操作網站的其他頁面。