今天我們來討論一種常用的文件上傳方式：使用Ajax上傳FormData。Ajax是一種在不刷新整個頁面的情況下與服務器交互的技術(shù)，而FormData是HTML5新增的一種處理表單數(shù)據(jù)的對象。結(jié)合起來，我們可以通過Ajax上傳FormData來實現(xiàn)無刷新上傳文件的功能。

假設(shè)我們要實現(xiàn)一個圖片上傳功能，用戶選擇了一個要上傳的圖片文件后，點擊上傳按鈕，就可以將該圖片上傳到服務器。使用傳統(tǒng)的表單提交方式，用戶選擇完文件后需要刷新整個頁面才能完成上傳。而使用Ajax上傳FormData，則可以在不刷新頁面的情況下異步上傳文件，提升用戶體驗。

首先，我們需要創(chuàng)建一個包含文件上傳表單的HTML代碼：

<form id="file-form" method="post" enctype="multipart/form-data">
<input type="file" id="file-input" name="file"/>
<button type="submit">上傳</button>
</form>

上面的代碼中，我們創(chuàng)建了一個id為"file-form"的表單，其中包含了一個文件選擇框和一個提交按鈕。用戶選擇完文件后，點擊提交按鈕就會觸發(fā)表單的提交。

接下來，我們需要編寫JavaScript代碼來處理表單的提交事件，使用Ajax上傳FormData：

document.getElementById("file-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var fileInput = document.getElementById("file-input");
var formData = new FormData();
formData.append("file", fileInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert("文件上傳成功！");
}
};
xhr.send(formData);
});

在上述代碼中，我們首先通過document.getElementById方法獲取file-input元素和file-form元素，然后創(chuàng)建一個FormData對象，將用戶選擇的文件添加到其中。接著，我們使用XMLHttpRequest對象創(chuàng)建一個POST請求，將FormData作為參數(shù)傳遞給send方法發(fā)送到服務器。

在服務器端，我們可以使用各種編程語言（如PHP、Java、Python等）來處理上傳文件的請求。以PHP為例，我們可以通過以下代碼來處理文件上傳：

$uploadedFile = $_FILES["file"];
$targetPath = "upload/";
$targetFile = $targetPath . basename($uploadedFile["name"]);
if (move_uploaded_file($uploadedFile["tmp_name"], $targetFile)) {
echo "文件上傳成功！";
} else {
echo "文件上傳失敗！";
}

以上PHP代碼首先通過$_FILES超全局變量獲取到上傳的文件信息。然后，我們指定了目標文件夾的路徑和目標文件的文件名。最后，使用move_uploaded_file函數(shù)將臨時文件移動到目標文件夾，并返回上傳結(jié)果。

綜上所述，通過Ajax上傳FormData可以實現(xiàn)無刷新上傳文件的功能。無論是上傳圖片、PDF文件還是其他類型的文件，都可以使用這種方式來實現(xiàn)。這種方式可以提供更好的用戶體驗，同時也可以降低服務器的壓力，是一種非常值得推薦的文件上傳方式。