ajax是一種利用JavaScript和XML（或JSON）進行異步通信的技術。在網頁開發中，ajax能夠實現頁面的無刷新加載和動態更新，大大提高了用戶體驗。圖片上傳和提交是我們常見的網頁交互功能之一，結合ajax技術，我們可以實現圖片的異步上傳和提交預覽的效果。
在圖片上傳和提交預覽中，我們可以使用HTML5中的File API來實現，該API提供了一些獲取本地文件信息的方法。舉個例子，我們創建一個簡單的上傳圖片表單，通過選擇本地圖片后，利用File API獲取到圖片文件的相關信息，然后通過ajax將文件數據提交到服務器。下面是一個代碼示例：

html
<form id="uploadForm">
<input type="file" id="uploadInput">
<button type="submit">上傳</button>
</form>
<div id="preview"></div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
var fileInput = document.getElementById('uploadInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 上傳成功后的處理邏輯
console.log(xhr.responseText);
}
};
xhr.send(formData);
});
document.getElementById('uploadInput').addEventListener('change', function() {
var fileInput = document.getElementById('uploadInput');
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement('img');
img.src = e.target.result;
document.getElementById('preview').appendChild(img);
};
reader.readAsDataURL(file);
});
</script>

在上面的示例中，我們首先通過getElementById方法獲取到上傳表單和預覽區域的DOM元素，然后分別為上傳表單的submit事件和上傳輸入框的change事件添加監聽器。
在上傳表單的submit事件處理函數中，我們阻止了表單的默認提交行為，然后獲取到上傳輸入框的文件列表中的第一個文件。接著，我們創建了一個FormData對象，利用append方法添加了文件數據。然后，我們創建了一個XMLHttpRequest對象，將其配置為異步POST請求，設置了onreadystatechange事件監聽器來監聽請求狀態的變化。在請求狀態為4（完成）且狀態碼為200（成功）時，我們可以在回調函數中處理上傳成功后的邏輯。最后，我們調用了send方法將數據發送到服務器。
在上傳輸入框的change事件處理函數中，我們首先獲取到上傳輸入框的文件列表中的第一個文件，然后創建了一個FileReader對象。我們為onload事件添加了一個監聽器，在文件讀取完畢后，將其結果賦值給新創建的img元素的src屬性，并將該元素添加到預覽區域的DOM元素中。
以上就是使用ajax實現圖片上傳和提交預覽的簡單示例。通過ajax技術，我們可以實現圖片的異步上傳和實時預覽，大大提高了用戶體驗。在實際開發中，我們可以根據需求進行適當的修改和擴展，如添加圖片壓縮、限制上傳文件類型和大小等功能，以滿足不同的業務需求。