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

<!-- 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事件來監聽文件上傳控件，獲取上傳的文件列表，并使用FileReader對象讀取文件并將其轉換成data URL。
• 然后，我們將每一個讀取的文件都添加到無序列表之中，以便用戶可以清晰地看到自己已上傳的圖片。
• 而在表單提交時，我們通過FormData對象將表單數據和已上傳的每個圖片都發送到服務器。發送圖片時，我們使用$.ajax方法將圖片轉換為base64格式，并以POST方式發送到服務器。而發送表單數據時，則需要將processData和contentType參數設置為false，以確保不對數據進行處理。