html
<div>
<input type="file" multiple accept="image/*" id="fileInput">
<button id="uploadButton">上傳</button>
</div>
<div id="previewArea"></div>
<style>
#previewArea {
display: flex;
flex-wrap: wrap;
}
.previewImage {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}
</style>

標簽用于展示已選中的圖片，并給它設置了id屬性為previewArea。為了讓圖片在頁面中合適地顯示，我們還定義了一個.previewImage的CSS類。
第二步，JavaScript代碼：

javascript
window.onload = function() {
var fileInput = document.getElementById('fileInput');
var previewArea = document.getElementById('previewArea');
var uploadButton = document.getElementById('uploadButton');
fileInput.addEventListener('change', function() {
previewArea.innerHTML = ''; // 清空已選中的圖片
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
// 根據文件對象創建一個URL
var url = window.URL.createObjectURL(file);
// 創建一個新的<img>標簽用于預覽圖片
var img = document.createElement('img');
img.className = 'previewImage';
img.src = url;
// 在previewArea中添加圖片
previewArea.appendChild(img);
}
});
uploadButton.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status === 200) {
alert('圖片上傳成功！');
} else {
alert('圖片上傳失??！');
}
};
var formData = new FormData();
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
formData.append('images[]', file);
}
xhr.open('POST', '/upload');
xhr.send(formData);
});
};

在JavaScript代碼中，首先獲取了fileInput、previewArea和uploadButton元素，并為其中的change和click事件分別添加了監聽器。
在文件選擇框發生變化時，我們首先清空了previewArea中的內容，接著遍歷文件對象數組并為每一個文件創建一個URL，并創建一個新的元素用于預覽圖片，并將其添加到previewArea中。
在上傳按鈕被點擊時，我們創建了一個XMLHttpRequest對象，并為其load事件添加了監聽器，用于判斷圖片上傳是否成功。接著，我們創建了一個FormData對象，并將文件對象數組追加到其中，最后使用xhr.send(formData)將文件發送到服務器端。
通過以上代碼，我們實現了通過Ajax技術提交多張圖片，并在頁面中實時顯示已選中的圖片。這種方式大大提高了用戶的上傳體驗，避免了用戶多次選擇并等待的繁瑣操作。
除了用戶上傳多張圖片的場景外，Ajax提交多張圖片還可以應用于其他需求，比如圖片拼接、圖片合并等。通過Ajax技術，我們可以快速、高效地實現這些功能，提升網站的用戶體驗。
綜上所述，通過Ajax技術提交多張圖片是一種常見且實用的功能。本文通過示例代碼詳細介紹了其實現原理和應用場景。希望讀者能夠根據本文提供的方法，靈活運用Ajax技術來實現自己的需求。