AJAX是一種在Web開發中常用的技術，可以使網頁在不刷新的情況下與服務器進行數據交互。然而，使用AJAX提交文件時，卻存在一個問題：無法直接提交文件名。這篇文章將探討這個問題，并提供一些解決方案。

在使用AJAX提交文件之前，讓我們先看一個簡單的例子。假設我們有一個上傳圖片的功能，用戶可以選擇一張本地的圖片并上傳到服務器。使用傳統的表單提交方式，我們可以輕松地獲取到文件名，并將其顯示在頁面上：

<form action="upload.php" method="post" enctype="multipart/form-data"><input type="file" name="file"><input type="submit" value="Upload"></form>
<script>
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
const fileName = e.target.files[0].name;
document.getElementById('file-name').innerHTML = fileName;
});
</script>

然而，如果我們嘗試使用AJAX提交文件，我們會發現無法直接獲取到文件名。下面是一個使用AJAX提交文件的簡單示例：

<form id="upload-form" enctype="multipart/form-data"><input type="file" name="file"><input type="button" value="Upload" onclick="uploadFile()"></form>
<script>
function uploadFile() {
var form = document.getElementById('upload-form');
var file = form.querySelector('input[type="file"]').files[0];
var formData = new FormData();
formData.append('file', file);
var request = new XMLHttpRequest();
request.open('POST', 'upload.php', true);
request.send(formData);
}
</script>

在這個例子中，我們無法直接獲取到文件名，并將其顯示在頁面上。這是因為AJAX向服務器發送的是一個FormData對象，其中包含了文件的二進制數據，但沒有文件名的信息。

那么有沒有辦法解決這個問題呢？答案是肯定的。一個常見的解決方案是在AJAX的回調函數中手動解析響應，并在其中獲取文件名。下面是一個示例：

<form id="upload-form" enctype="multipart/form-data"><input type="file" name="file"><input type="button" value="Upload" onclick="uploadFile()"></form>
<script>
function uploadFile() {
var form = document.getElementById('upload-form');
var file = form.querySelector('input[type="file"]').files[0];
var formData = new FormData();
formData.append('file', file);
var request = new XMLHttpRequest();
request.open('POST', 'upload.php', true);
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var response = JSON.parse(request.responseText);
var fileName = response.fileName;
document.getElementById('file-name').innerHTML = fileName;
}
};
request.send(formData);
}
</script>

在這個例子中，我們在服務器的響應中包含了文件名的信息，并將其通過JSON格式返回給客戶端。客戶端在AJAX的回調函數中解析響應，并將文件名顯示在頁面上。

總結起來，AJAX無法直接提交文件名是因為它只發送了文件的二進制數據，而沒有包含文件名的信息。然而，我們可以通過在服務器的響應中包含文件名的信息，并在AJAX的回調函數中解析響應來解決這個問題。這樣，我們就可以輕松地獲取并顯示文件名了。