jQuery Ajax 發(fā)送圖片是一個(gè)非常常見的需求,可以通過以下步驟來實(shí)現(xiàn):
//html代碼 <input type="file" id="imageUpload" accept="image/*"> //JavaScript代碼 $("#imageUpload").change(function(){ var formData = new FormData(); var file = $(this)[0].files[0]; formData.append('image', file); $.ajax({ url: 'upload.php', type: 'POST', data: formData, processData: false, contentType: false, success: function(response) { console.log(response); }, error: function(xhr, status, error) { console.log(error); } }); });
首先,我們在HTML中創(chuàng)建一個(gè) file 類型的 input,這樣用戶就可以選擇要上傳的文件。然后,我們使用 jQuery 來監(jiān)聽 input 的 change 事件,當(dāng)用戶選擇文件時(shí),我們就可以開始發(fā)送 Ajax 請求了。
在 JavaScript 代碼中,我們首先創(chuàng)建一個(gè) FormData 對象,并將選取的文件添加到其中。然后,我們使用 $.ajax 方法來發(fā)送 POST 請求到 upload.php 文件。其中,我們需要設(shè)置 processData、contentType 以及 data 參數(shù),分別表示需要禁用 jQuery 對數(shù)據(jù)的處理、設(shè)置請求的內(nèi)容類型以及設(shè)置要發(fā)送的數(shù)據(jù)。最后,在成功和失敗時(shí),我們通過回調(diào)函數(shù)來處理返回結(jié)果。
需要注意的是,在上傳圖片時(shí),我們需要設(shè)置 processData 和 contentType 參數(shù),這樣才能正確地發(fā)送二進(jìn)制數(shù)據(jù)。如果不設(shè)置這些參數(shù),服務(wù)器將無法解析我們發(fā)送的圖片文件。