使用Ajax發送file文件是一種常見的前端開發技術，它可以實現在不刷新整個頁面的情況下，將文件上傳到服務器。通過Ajax發送file文件可以方便地實現圖片上傳、文件上傳等功能。本文將詳細介紹如何使用Ajax發送file文件，并提供舉例說明。
要使用Ajax發送file文件，我們需要先準備一個包含文件上傳表單的頁面。例如，我們可以創建一個包含一個file類型的input標簽和一個上傳按鈕的表單。用戶選擇文件后，點擊上傳按鈕會觸發Ajax請求，將文件發送到服務器。
具體實現代碼如下所示：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file" />
<input type="button" value="上傳" onclick="uploadFile()" />
</form>
<script>
function uploadFile() {
var formData = new FormData();
var file = document.getElementById("fileInput").files[0];
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 文件上傳成功
console.log("文件上傳成功");
}
};
xhr.send(formData);
}
</script>

在上述代碼中，我們首先通過document.getElementById("fileInput")獲取用戶選擇的文件。然后，我們創建一個FormData對象，將文件添加到其中。FormData對象是一種可以將表單數據序列化為鍵值對的對象。接下來，我們創建一個XMLHttpRequest對象，并使用open()方法指定請求的方法、URL和是否異步。然后，我們設置onreadystatechange事件處理函數，監聽請求狀態的變化。最后，我們使用send()方法將FormData對象發送到服務器。
上面的例子是使用原生JavaScript實現的，也可以使用jQuery等前端框架來簡化代碼。下面是一個使用jQuery實現的例子：

<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file" />
<input type="button" value="上傳" onclick="uploadFile()" />
</form>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function uploadFile() {
var formData = new FormData();
var file = $("#fileInput")[0].files[0];
formData.append("file", file);
$.ajax({
url: "/upload",
type: "POST",
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 文件上傳成功
console.log("文件上傳成功");
}
});
}
</script>

在上述代碼中，我們使用$.ajax()方法發起一個Ajax請求。通過設置url、type、data、processData和contentType等參數，可以實現文件上傳的功能。其中，processData和contentType參數需要分別設置為false，以告訴jQuery不要對數據進行處理，并使用正確的Content-Type。