在網(wǎng)頁制作當(dāng)中，我們常常會涉及到上傳多張圖片的需求。而通過使用jQuery，可以輕松地實現(xiàn)上傳多張圖片并將這些圖片傳遞給表單。

<!-- HTML 代碼 -->
<input type="file" id="imgUpload" multiple />
<ul id="imgList"></ul>
<form action="#" method="post" enctype="multipart/form-data">
<input type="text" name="title" />
<input type="submit" value="提交" />
</form>
<!-- JavaScript 代碼 -->
<script type="text/javascript">
$(function(){
$('#imgUpload').change(function(){
var fileList = this.files;
for(var i = 0; i < fileList.length; i++){
var file = fileList[i];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
$('<li><img src="' + this.result +
'" /></li>').appendTo('#imgList');
}
}
});
$('form').submit(function(e){
e.preventDefault();
var formData = new FormData($('form')[0]);
$('#imgList img').each(function(){
var imgFile = $(this).attr('src');
$.ajax({
url: 'uploadImg.php',
type: 'POST',
data: {'imgFile': imgFile},
success: function(data){
console.log(data);
}
});
});
$.ajax({
url: 'submitForm.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data){
console.log(data);
}
});
});
});
</script>

代碼解釋：

• 首先，我們在HTML中添加了一個文件上傳控件，以及一個無序列表用于顯示上傳的圖片。
• 接著，我們使用jQuery中的change事件來監(jiān)聽文件上傳控件，獲取上傳的文件列表，并使用FileReader對象讀取文件并將其轉(zhuǎn)換成data URL。
• 然后，我們將每一個讀取的文件都添加到無序列表之中，以便用戶可以清晰地看到自己已上傳的圖片。
• 而在表單提交時，我們通過FormData對象將表單數(shù)據(jù)和已上傳的每個圖片都發(fā)送到服務(wù)器。發(fā)送圖片時，我們使用$.ajax方法將圖片轉(zhuǎn)換為base64格式，并以POST方式發(fā)送到服務(wù)器。而發(fā)送表單數(shù)據(jù)時，則需要將processData和contentType參數(shù)設(shè)置為false，以確保不對數(shù)據(jù)進行處理。