Ajax是一種用于實現網頁無刷新交互的前端技術，它可以將用戶的操作發送給服務器，并接收服務器返回的數據，從而實現動態更新頁面內容的功能。在上傳圖片這個常見的使用場景中，Ajax相比傳統的表單提交具有更好的用戶體驗和性能。傳統的表單提交方式需要用戶選擇文件后刷新整個頁面才能完成上傳，而Ajax上傳圖片則可以在不刷新頁面的情況下實現文件的上傳和預覽，極大地提升了用戶的操作效率。

舉一個例子來說明這兩種方式的區別。假設我們要在一個社交網絡網站上上傳頭像，傳統的表單提交方式是用戶選擇完圖片文件后，點擊提交按鈕，然后等待頁面刷新，最后頁面顯示出新的頭像。整個過程中用戶需要等待頁面刷新，耗費了較多的時間。而如果采用Ajax上傳圖片，用戶只需要選擇圖片文件后，頁面就會自動異步上傳并實時顯示新的頭像，用戶無需等待頁面刷新，即可完成頭像的上傳。這種方式不僅減少了用戶的等待時間，還提升了用戶體驗。

下面我們來看一下實現Ajax上傳圖片的具體代碼。首先，我們需要一個包含文件選擇框和圖片預覽區域的表單。

<form id="upload-form" enctype="multipart/form-data"><input type="file" id="upload-file" name="file" accept="image/*"><img id="preview-img" src="" alt="Preview"><button type="submit">上傳圖片</form>

上述代碼中，我們通過<input type="file">標簽創建了一個文件選擇框，用戶可以通過點擊該選擇框選擇要上傳的圖片文件。通過<img>標簽創建了一個圖片預覽區域，用來實時顯示用戶選擇的圖片。通過<button>標簽創建了一個提交按鈕，用來觸發表單的提交操作。

接下來，我們使用Javascript代碼監聽表單的提交事件，并通過Ajax方式將圖片文件上傳到服務器。

document.getElementById('upload-form').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表單的默認提交行為
var fileInput = document.getElementById('upload-file');
var formData = new FormData(); // 創建FormData對象
formData.append('file', fileInput.files[0]); // 將文件放入FormData對象
var xhr = new XMLHttpRequest(); // 創建XMLHttpRequest對象
xhr.open('POST', '/upload', true); // 打開與服務器的連接
xhr.send(formData); // 發送文件數據
// 監聽上傳進度
xhr.upload.addEventListener('progress', function(event) {
var progress = event.loaded / event.total * 100;
console.log('已上傳' + progress.toFixed(2) + '%');
});
// 監聽上傳完成
xhr.addEventListener('load', function() {
console.log('上傳完成');
});
// 監聽上傳出錯
xhr.addEventListener('error', function() {
console.log('上傳出錯');
});
});

上述代碼中，我們通過addEventListener方法為表單的submit事件注冊了一個回調函數。在該回調函數中，我們首先調用event.preventDefault()方法阻止表單的默認提交行為。然后，通過FormData對象將用戶選擇的圖片文件封裝起來，并使用XMLHttpRequest對象將封裝好的文件數據發送到服務器。通過傳遞FormData對象作為xhr.send方法的參數，實現了文件的異步上傳。

在代碼的后續部分，我們為xhr對象的upload事件添加了一個進度回調函數，用來實時監聽上傳進度。另外，我們還為xhr對象的load事件添加了一個回調函數，并分別給出了上傳完成和上傳出錯的提示。

通過以上的代碼實例，我們可以看到相比傳統的表單提交方式，Ajax上傳圖片具有更好的用戶體驗和性能。用戶無需等待頁面刷新，即可完成圖片的上傳和預覽。同時，我們還可以根據實際需求，對文件上傳的進度、完成和錯誤進行監聽和處理，從而更好地優化用戶體驗。