AJAX是一種強大的Web開發技術，可以使我們在不刷新整個頁面的情況下與服務器進行數據交互。在以往的文章中，我們已經討論了AJAX的基本原理和用法，在這篇文章中，我們將探討如何使用相對路徑來提交文件。

在許多Web應用程序中，我們常常需要向服務器上傳文件。一種常見的做法是使用HTML表單元素和POST請求來提交文件。然而，當我們使用AJAX來處理這個過程時，稍微復雜一些。因為AJAX默認使用相對路徑來指定URL，所以我們需要使用一些技巧來傳遞文件的路徑。

讓我們來看一個例子。假設我們有一個網站，用戶可以在其中上傳圖片，并在服務器上進行保存。我們已經創建了一個文件上傳表單，其中包含一個文件選擇輸入框和一個提交按鈕。在用戶選擇文件并點擊提交按鈕后，我們將使用AJAX將文件上傳到服務器。

<form id="fileUploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="image" />
<input type="button" value="Upload" onclick="uploadFile()" />
</form>

在上面的代碼中，我們給form元素設置了一個唯一的id，并在提交按鈕的onclick事件中調用了uploadFile()函數。讓我們來看看這個函數應該如何實現。

function uploadFile() {
var fileInput = document.getElementById("image");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.send(formData);
}

在uploadFile()函數中，我們首先獲取了文件選擇輸入框的引用，并使用files屬性獲取用戶選擇的文件。通過創建一個FormData對象，我們可以構建一個包含文件數據的表單。然后，我們創建一個XMLHttpRequest對象，并使用open方法指定URL和請求方法。最后，我們使用send方法發送請求。

在這個例子中，我們將文件提交到了名為"upload.php"的服務器腳本。請注意，"upload.php"是一個相對路徑，相對于當前網頁的URL。這是AJAX默認的行為，如果我們不提供完整的URL路徑，AJAX將會自動根據當前網頁的URL構建請求的絕對路徑。

當然，如果我們希望將文件提交到不同的URL，我們可以在XMLHttpRequest對象的open方法中提供一個完整的URL路徑。

xhr.open("POST", "http://example.com/upload.php", true);

總之，通過使用相對路徑來提交文件，我們可以簡化AJAX請求的處理過程。無論是將文件上傳到同一服務器還是不同的服務器，使用相對路徑都是一種靈活而便捷的方法。希望這篇文章能幫助你更好地理解如何使用AJAX提交文件。