Ajax上傳是一種常用的上傳文件方式，常見于網(wǎng)頁的圖片上傳功能中。在進(jìn)行Ajax上傳時(shí)，我們經(jīng)常會遇到一個問題，就是如何獲取上傳圖片的路徑。本文將介紹一種簡單的方法，通過使用FormData對象和XMLHttpRequest對象獲取上傳圖片的路徑，并給出詳細(xì)的代碼示例。

在使用Ajax上傳時(shí)，我們通常會將文件數(shù)據(jù)封裝到FormData對象中，然后通過XMLHttpRequest對象發(fā)送給服務(wù)器。在服務(wù)器成功接收到文件之后，會返回一個路徑表示上傳文件在服務(wù)器上的存儲位置。

接下來，我們使用一個例子來說明如何獲取上傳圖片的路徑。假設(shè)我們有一個簡單的網(wǎng)頁，其中包含一個圖片上傳按鈕和一個用來顯示上傳圖片路徑的文本框。點(diǎn)擊上傳按鈕會觸發(fā)一個函數(shù)，這個函數(shù)使用Ajax來上傳圖片，并將上傳后的路徑顯示在文本框中。

var uploadButton = document.getElementById('upload-button');
var filePathTextBox = document.getElementById('file-path-textbox');
uploadButton.addEventListener('click', function() {
var fileInput = document.getElementById('file-input');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var filePath = xhr.responseText;
filePathTextBox.value = filePath;
}
};
xhr.send(formData);
});

上述代碼中，我們首先獲取上傳按鈕和文本框的引用，然后通過addEventListener將點(diǎn)擊事件綁定到上傳按鈕上。當(dāng)用戶點(diǎn)擊上傳按鈕時(shí)，會觸發(fā)一個匿名函數(shù)。在該函數(shù)中，我們首先獲取用戶選擇的文件，并將其封裝到FormData對象中。然后創(chuàng)建一個XMLHttpRequest對象，設(shè)置請求方法為POST，請求地址為"/upload"。最后，我們設(shè)置onreadystatechange事件的回調(diào)函數(shù)，在請求成功返回后，將圖片路徑賦值給文本框的value屬性，從而實(shí)現(xiàn)路徑的顯示。

通過以上的代碼示例，我們可以看到，通過FormData對象封裝文件數(shù)據(jù)，并通過XMLHttpRequest對象發(fā)送給服務(wù)器后，服務(wù)器返回的路徑信息可以通過xhr.responseText獲得。我們可以將其賦值給任何我們想要顯示路徑的元素，比如文本框、div等。

總之，通過使用FormData對象和XMLHttpRequest對象，我們可以很方便地獲取上傳圖片的路徑，并實(shí)現(xiàn)路徑的顯示。這種方法簡單、高效，在實(shí)際的開發(fā)中也得到廣泛應(yīng)用。