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

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

接下來(lái)，我們需要編寫(xiě) JavaScript 代碼來(lái)處理文件上傳。首先，我們需要獲取用戶選擇的文件，并將其存儲(chǔ)在一個(gè)變量中：

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

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

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

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

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) {
// 上傳成功，進(jìn)行相關(guān)處理
}
};
xhr.send(formData);

在上述代碼中，我們打開(kāi)了一個(gè) POST 請(qǐng)求，將文件上傳到 upload.php 文件。我們還監(jiān)聽(tīng)了 XMLHttpRequest 對(duì)象的 readyState 和 status，以便在服務(wù)器響應(yīng)完成后進(jìn)行相關(guān)處理。 總結(jié)起來(lái)，通過(guò)使用 FormData 對(duì)象，我們可以在 Ajax 中傳輸文件參數(shù)。我們首先創(chuàng)建一個(gè) FormData 對(duì)象，并將文件參數(shù)添加到其中。然后，我們使用 XMLHttpRequest 對(duì)象發(fā)送請(qǐng)求，并將 FormData 對(duì)象作為參數(shù)傳遞給服務(wù)器。通過(guò)這樣的方式，我們可以實(shí)現(xiàn)在不刷新頁(yè)面的情況下上傳文件，并且可以根據(jù)服務(wù)器的響應(yīng)結(jié)果進(jìn)行相關(guān)處理。