在開發 web 應用程序過程中，經常需要上傳文件。而 Ajax 可以實現無需刷新頁面即可向服務器發送請求，這在上傳文件方面也有很大的用武之地。然而，由于 Ajax 默認情況下只支持傳輸字符串參數，因此要實現文件的上傳，我們需要借助額外的技巧和工具。本文將介紹如何使用 Ajax 傳輸文件參數，并通過舉例說明其使用方法及原理。 假設我們正在開發一個簡單的上傳圖片的功能。用戶可以選擇圖片文件并將其上傳到服務器。在傳統的表單提交方式中，我們可以使用 input 標簽的 type 屬性設置為 "file" 來創建一個文件選擇框，然后通過表單的提交將文件發送到服務器。然而，在 Ajax 中，我們不能直接傳遞文件參數，因此我們需要通過 FormData 對象來處理。 首先，我們需要在 HTML 中創建一個文件選擇框，并為其添加一個 id，以便在 JavaScript 中進行操作：

<input type="file" id="fileInput" />

接下來，我們需要編寫 JavaScript 代碼來處理文件上傳。首先，我們需要獲取用戶選擇的文件，并將其存儲在一個變量中：

var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];

在上述代碼中，我們通過使用getElementById()方法獲取了 fileInput 元素，并使用 files 屬性獲取用戶選擇的文件列表。由于我們只允許用戶選擇一個文件，所以我們只取第一個文件對象。 接下來，我們創建一個新的 FormData 對象，并將文件參數添加到其中：

var formData = new FormData();
formData.append("file", file);

在上述代碼中，我們使用 append() 方法將文件參數添加到 formData 對象中。第一個參數是參數的名稱，這里我們將其設置為 "file"。第二個參數是要添加的文件對象。 接下來，我們可以使用 XMLHttpRequest 對象來發送 Ajax 請求，并將 formData 作為參數傳遞給服務器。以下是一個完整的例子：

var fileInput = document.getElementById("fileInput");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上傳成功，進行相關處理
}
};
xhr.send(formData);

在上述代碼中，我們打開了一個 POST 請求，將文件上傳到 upload.php 文件。我們還監聽了 XMLHttpRequest 對象的 readyState 和 status，以便在服務器響應完成后進行相關處理。 總結起來，通過使用 FormData 對象，我們可以在 Ajax 中傳輸文件參數。我們首先創建一個 FormData 對象，并將文件參數添加到其中。然后，我們使用 XMLHttpRequest 對象發送請求，并將 FormData 對象作為參數傳遞給服務器。通過這樣的方式，我們可以實現在不刷新頁面的情況下上傳文件，并且可以根據服務器的響應結果進行相關處理。