隨著互聯網的發展，圖片上傳已成為我們日常生活中常見的一項功能。而隨之而來的一大問題就是如何實現方便快捷的圖片上傳。在這方面，AJAX和jQuery是兩個非常強大的工具，它們可以幫助我們實現無需頁面刷新的異步上傳，并且提供了豐富的功能和易用的API。

在真實的場景中，我們經常面臨需要上傳圖片并實時顯示上傳進度的需求。通過AJAX和jQuery，我們可以輕松實現這一功能。下面是一個簡單的示例：

$.ajax({
url: "upload.php",
type: "POST",
data: formData,
processData: false,
contentType: false,
xhr: function(){
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
// 更新進度條
$("#progress").css("width", percentComplete * 100 + "%");
// 顯示進度百分比
$("#progress").text(Math.round(percentComplete * 100) + "%");
}
}, false);
return xhr;
},
success: function(response){
// 文件上傳成功后的處理
// ...
},
error: function(){
// 文件上傳失敗的處理
// ...
}
});

上述代碼中，我們使用了$.ajax方法向服務器發送POST請求，并將文件數據以formData的形式發送。設置processData為false和contentType為false，可以讓jQuery不對數據進行序列化，并將請求的Content-Type設為false，以便使用正確的Content-Type。xhr函數返回的是一個XMLHttpRequest對象，我們通過它的upload事件監聽上傳進度，并更新進度條和百分比。

另外一個常見的需求是圖片的預覽功能。我們可以使用FileReader API來實現這一功能。下面是一個示例：

$("#file-input").change(function(){
var file = this.files[0];
var reader = new FileReader();
reader.onload = function (e) {
$("#preview").attr("src", e.target.result);
}
reader.readAsDataURL(file);
});

上述代碼中，我們使用了$("#file-input")選擇器來監聽文件選擇框的change事件。當文件選擇框的內容改變時，將選中的文件讀取為DataURL，并將DataURL設為img標簽的src屬性，從而實現預覽功能。

總的來說，AJAX和jQuery是非常有用的工具，能夠極大地簡化圖片上傳的過程。無論是實現進度條和百分比的顯示，還是實現圖片預覽功能，它們都提供了簡單易用的API和豐富的功能。希望通過本文的介紹，讀者能夠進一步掌握AJAX和jQuery在圖片上傳方面的應用。