AJAX（Asynchronous JavaScript and XML）是一種在網頁中使用前端技術與后臺進行異步通信的方法。通過AJAX，可以實現在不刷新整個頁面的情況下，與服務器進行數據交互。而將文件傳遞給后臺是AJAX的一個常見應用場景。本文將介紹如何使用AJAX將文件傳遞給后臺，并通過舉例說明其應用。

在AJAX中，可以使用FormData對象來處理文件傳遞。首先，我們需要創建一個表單，包含一個文件選擇的輸入框與一個提交按鈕。

<form id="myForm" action="backend.php" method="POST" enctype="multipart/form-data">
<input id="fileInput" type="file" name="file" />
<input type="submit" value="上傳文件" />
</form>

上述代碼中，form標簽的enctype屬性設置為"multipart/form-data"表示表單中包含文件。input標簽的type屬性設置為"file"，用于選擇文件。當點擊提交按鈕時，表單會將文件提交給后臺進行處理。

接下來，我們使用JavaScript來處理表單提交的事件。首先，獲取表單對象，并為其添加submit事件監聽器。在事件監聽器中，創建一個FormData對象，并將文件對象添加到其中。

<script>
var form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單默認提交行為
var formData = new FormData();
var fileInput = document.getElementById('fileInput');
formData.append('file', fileInput.files[0]);
// 使用AJAX將FormData對象發送給后臺
var xhr = new XMLHttpRequest();
xhr.open('POST', 'backend.php', true);
xhr.onload = function() {
if(xhr.status === 200) {
// 后臺處理完成后的回調
console.log('文件上傳成功！');
} else {
console.log('文件上傳失敗！');
}
};
xhr.send(formData);
});
</script>

上述代碼中，首先使用event.preventDefault()方法阻止表單的默認提交行為。然后創建FormData對象，并使用append()方法將文件對象添加到其中。接下來，使用XMLHttpRequest對象發送FormData對象給后臺。在請求完成后，可以根據后臺的處理結果進行相應的回調操作。

舉個例子，假設有一個圖片上傳網站，用戶可以選擇一張圖片上傳。通過AJAX將圖片傳遞給后臺之后，后臺會對圖片進行處理，并返回處理后的結果。如果處理成功，可以顯示處理后的圖片，否則提示用戶處理失敗。

<form id="imageUploadForm" action="upload.php" method="POST" enctype="multipart/form-data">
<input id="imageInput" type="file" name="image" />
<input type="submit" value="上傳圖片" />
</form>
<script>
var form = document.getElementById('imageUploadForm');
form.addEventListener('submit', function(event) {
event.preventDefault();
var formData = new FormData();
var imageInput = document.getElementById('imageInput');
formData.append('image', imageInput.files[0]);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function() {
if(xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if(response.success) {
var processedImage = document.getElementById('processedImage');
processedImage.src = response.url;
processedImage.style.display = 'block';
} else {
console.log('圖片處理失敗！');
}
} else {
console.log('文件上傳失敗！');
}
};
xhr.send(formData);
});
</script>
<img id="processedImage" style="display:none;">

在上述例子中，用戶可以選擇一張圖片上傳。當點擊提交按鈕之后，表單通過AJAX將圖片傳遞給后臺upload.php進行處理。后臺處理完成后，返回一個JSON對象，包含處理成功與否的標志success和處理后的圖片url。如果處理成功，會顯示處理后的圖片，否則會在控制臺打印錯誤信息。

通過以上的例子，我們可以看到，使用AJAX將文件傳遞給后臺是一種非常便捷的方式。無需刷新整個頁面，只需要將文件作為FormData對象添加到AJAX請求中，即可與后臺進行文件傳遞與處理。