在web開發中，使用Ajax上傳文件是一個常見的需求。然而，在處理中文文件名時，經常會遇到亂碼問題。本文將介紹這個問題以及解決方法。

當使用Ajax上傳文件時，無論是通過FormData對象還是直接發送二進制數據流，都可能會導致中文文件名亂碼的問題。以下是一個示例代碼，演示了使用FormData對象上傳文件：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file" id="fileInput" />
</form>

假設用戶選擇了一個名為“測試文件.txt”的文件進行上傳。在后端接收到這個文件時，可能會發現文件名變成了一串亂碼，例如“%E6%B5%8B%E8%AF%95%E6%96%87%E4%BB%B6.txt”。

這是因為，當瀏覽器發送Ajax請求時，默認會使用UTF-8編碼。而在FormData對象中，使用了FormData的append方法來拼接數據，此方法會自動將中文字符編碼為UTF-8格式的字節。因此，在接收到請求時，后端無法正確解析這部分URL編碼的中文字符，從而導致文件名亂碼。

為了解決這個問題，可以在前端代碼中進行手動編碼。通過調用encodeURIComponent函數，將中文字符轉換成URL編碼形式的字符串。以下是修改后的示例代碼：

var form = document.getElementById("uploadForm");
var formData = new FormData(form);
var fileName = document.getElementById("fileInput").files[0].name;
var encodedFileName = encodeURIComponent(fileName);
formData.append("file", document.getElementById("fileInput").files[0], encodedFileName);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.send(formData);

在這個示例中，我們獲取了用戶選擇文件的原始文件名，并使用encodeURIComponent函數對其進行編碼。然后，將這個編碼后的文件名作為參數傳遞給了append方法，將文件數據添加到FormData對象中。最后，我們發送了帶有編碼后文件名的Ajax請求。

通過這種方式，我們可以確保在接收到文件時，后端能夠正確解析文件名，并避免了中文文件名亂碼的問題。

總結來說，當使用Ajax上傳文件時，中文文件名可能會出現亂碼問題。為了解決這個問題，我們可以在前端代碼中手動對中文字符進行編碼，使用encodeURIComponent函數轉換為URL編碼形式的字符串。這樣可以確保后端能夠正確解析文件名，避免中文文件名亂碼。