AJAX（Asynchronous JavaScript and XML）是一種在Web應用程序中使用的技術，它允許在不重新加載整個頁面的情況下更新部分頁面內容。在這篇文章中，我們將探討如何使用AJAX獲取上傳的圖片流，并通過舉例說明其應用。AJAX提供了一種便捷的方式來上傳圖片，并立即在頁面上顯示。通過這種方式，用戶可以在提交表單之前預覽圖片，并在確認后上傳到服務器。

讓我們以一個簡單的例子開始。假設我們有一個包含一個文件上傳字段和一個預覽區域的表單。當用戶選擇要上傳的圖片后，使用AJAX將該圖片發送到服務器，并顯示該圖片的預覽圖。以下是實現此功能的代碼：

HTML:
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="image" id="imageInput" onchange="previewImage()">
<img id="preview" src="" alt="Preview Image">
<button onclick="uploadImage()">Upload</button>
</form>
JavaScript:
function previewImage() {
var preview = document.getElementById('preview');
var fileInput = document.getElementById('imageInput');
preview.src = URL.createObjectURL(fileInput.files[0]);
}
function uploadImage() {
var form = document.getElementById('uploadForm');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
alert('Image uploaded successfully!');
}
};
xhr.send(formData);
}

首先，HTML部分包含一個表單，其中包含一個文件上傳字段（input type="file"）和一個用于顯示上傳圖片預覽的img元素。在選擇圖片后，我們調用previewImage函數，將選擇的圖片顯示在預覽區域。然后，我們調用uploadImage函數，該函數將使用AJAX將圖片發送到服務器，并在成功上傳后顯示提示。

在JavaScript部分，我們首先獲取表單元素和文件輸入元素。然后，我們使用URL.createObjectURL函數為預覽圖像的src屬性創建一個臨時URL。這樣做是為了在用戶選擇圖片之后立即顯示預覽圖像，而不需要將其上傳到服務器。接下來，我們使用FormData對象創建一個包含表單數據的對象。然后，我們使用XMLHttpRequest對象創建一個異步HTTP請求，并通過POST方法將數據發送到服務器的/upload端點。在readystatechange事件處理程序中，我們檢查請求的狀態和狀態碼，以確保成功上傳。最后，我們發送數據到服務器。

通過這個例子，我們可以看到使用AJAX獲取上傳的圖片流是多么簡單和靈活。我們可以使用AJAX在不刷新整個頁面的情況下實時預覽和上傳圖片。這是一個非常有用的功能，特別適用于需要快速上傳圖片和查看預覽的應用程序，如社交媒體平臺、電子商務網站等。

總之，AJAX使得獲取上傳的圖片流變得非常容易。它為Web開發人員提供了一種簡單而強大的方式來上傳圖片，并立即在頁面上顯示預覽。通過AJAX，用戶可以在提交表單之前查看并確認所上傳的圖片。這種功能對于許多Web應用程序來說是必不可少的，因為它提供了更好的用戶體驗和互動性。