jQuery和Ajax是現代網頁開發中必不可少的技術，它們之間的配合讓我們可以實現更多有趣而優秀的功能。其中之一就是通過jQuery和Ajax實現圖片上傳的功能。

$(document).ready(function(){
var imageInput = $('#image_input'); //圖片input標簽
var imagePreview = $('#image_preview'); //預覽圖標簽
var uploadButton = $('#upload_button'); //上傳按鈕
imageInput.on('change', function(event){
event.preventDefault();
var files = event.target.files;
var reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = function(loadEvent) {
imagePreview.attr('src', loadEvent.target.result);
uploadButton.prop('disabled', false); //上傳按鈕啟用
};
});
uploadButton.on('click', function(event){
event.preventDefault();
var formData = new FormData();
formData.append('image', imageInput.prop('files')[0]);
$.ajax({
url: '/upload',
method: 'POST',
dataType: 'json',
data: formData,
processData: false,
contentType: false,
success: function(data){
alert('上傳成功！');
},
error: function(jqXHR, textStatus, errorThrown){
alert('上傳失敗，' + textStatus + ': ' + errorThrown);
}
});
});
});

上面的代碼中，我們首先選擇圖片input標簽、預覽圖標簽和上傳按鈕，然后監聽圖片input標簽的change事件。當用戶選擇了一個圖片文件后，我們使用FileReader API將圖片預覽在預覽圖標簽中，并啟用上傳按鈕。當用戶點擊上傳按鈕后，我們使用FormData API將圖片文件封裝成一個FormData對象，并將其通過Ajax POST請求上傳到服務器。

通過這個簡單的jQuery和Ajax實現圖片上傳的例子，我們不僅可以更深入地理解這兩個技術的用法，同時也為自己的網頁開發積累了更多有用的經驗。