AJAX上傳文件是一種常用的技術，它可以在網頁上實現無刷新上傳文件的功能，為用戶提供更好的體驗。在上傳文件的過程中，有時候我們需要獲取文件的名稱，在本文中，我們將探討如何使用AJAX上傳文件并獲取文件名。

假設我們有一個上傳文件的表單，其中包含一個文件選擇器和一個提交按鈕。當用戶選擇文件并點擊提交按鈕時，表單會使用AJAX將文件上傳到服務器。我們可以通過以下步驟來實現獲取文件名的功能：

首先，我們需要使用HTML創建一個簡單的上傳文件表單。

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput" />
<input type="submit" value="上傳" />
</form>

在上面的代碼中，我們定義了一個提交表單的按鈕，并為其添加了一個id屬性，以便稍后在JavaScript中引用。同時，我們也定義了一個文件選擇器，并為其添加了一個id屬性和一個name屬性，方便獲取選擇的文件。

接下來，我們需要使用AJAX來上傳文件并獲取文件名。我們可以使用jQuery的ajax()函數來實現。下面是示例代碼：

$(document).ready(function() {
// 監聽表單的提交事件
$("#uploadForm").submit(function(e) {
e.preventDefault(); // 阻止表單的默認提交行為
var formData = new FormData(this); // 創建一個FormData對象
$.ajax({
url: $(this).attr("action"), // 獲取表單的action屬性作為URL
type: $(this).attr("method"), // 獲取表單的method屬性作為請求類型
data: formData,
processData: false,
contentType: false,
success: function(response) {
var fileName = response.fileName; // 獲取服務器返回的文件名
alert("上傳成功！文件名：" + fileName);
}
});
});
});

在上面的代碼中，我們首先使用jQuery的ready()函數在文檔加載完畢之后執行我們的代碼。之后，我們使用submit()函數來監聽表單的提交事件。當用戶點擊提交按鈕時，代碼中的匿名函數將被執行。

在匿名函數中，我們首先調用preventDefault()函數來阻止表單的默認提交行為。然后，我們使用FormData對象來創建一個包含表單數據的實例。接下來，我們使用ajax()函數發送請求到服務器。我們將表單的action屬性作為URL參數，并將method屬性作為請求類型。

在ajax()函數的data參數中，我們將FormData對象傳遞給服務器。我們還需要將processData和contentType參數設置為false，以便正確處理表單數據。當服務器成功返回響應時，我們可以通過response.fileName獲取文件名，并將其顯示給用戶。

總結而言，AJAX上傳文件并獲取文件名是一種常用的技術，通過使用jQuery的ajax()函數，我們可以輕松地實現這一功能。在上文中，我們簡要介紹了如何創建上傳文件表單和使用AJAX發送請求，并給出了相應的示例代碼。