AJAX（Asynchronous JavaScript and XML）是一種使用JavaScript和XML進行客戶端和服務器之間異步通信的技術。在web開發中，常常需要向服務器發送和接收數據，其中包括圖片。本文將介紹如何使用AJAX發送二進制流圖片，并通過舉例說明其應用。

在使用AJAX發送圖片之前，我們需要將圖片轉換為二進制流。一種常用的方法是使用FileReader對象將圖片轉換為Base64編碼的字符串。以下是一個示例代碼：

// 選擇圖片
var fileInput = document.getElementById('image');
var file = fileInput.files[0];
// 創建FileReader對象
var reader = new FileReader();
// 讀取文件內容，并將圖片轉換為Base64編碼
reader.onload = function (event) {
var base64Image = event.target.result;
// 發送AJAX請求
// ...
};
reader.readAsDataURL(file);

上述代碼中，我們首先通過`document.getElementById`獲取到一個`input`元素，該元素用于選擇圖片。然后我們從`input`元素的`files`屬性中獲取到用戶選擇的圖片文件對象。接下來，我們創建一個`FileReader`對象，并通過其`onload`事件監聽文件加載完成的事件。在事件處理函數中，我們使用`event.target.result`獲取到文件的Base64編碼字符串。最后，我們可以將該Base64編碼字符串發送給服務器或進行其他操作。

一種常見的應用場景是，在網頁上預覽用戶選擇的圖片。以下是一個示例代碼：

// 顯示圖片預覽
var preview = document.getElementById('preview');
var image = document.createElement('img');
// 創建FileReader對象
var reader = new FileReader();
// 讀取文件內容，并將圖片預覽顯示在網頁上
reader.onload = function (event) {
image.src = event.target.result;
preview.appendChild(image);
};
reader.readAsDataURL(file);

上述代碼中，我們首先通過`document.getElementById`獲取到一個元素用于顯示圖片預覽。然后，我們創建一個`img`元素，并通過`createElement`方法創建一個新的`img`元素對象。接下來，我們創建一個`FileReader`對象，并通過其`onload`事件監聽文件加載完成的事件。在事件處理函數中，我們使用`event.target.result`獲取到文件的Base64編碼字符串，并將其賦值給`img`元素的`src`屬性。最后，我們通過`appendChild`方法將`img`元素添加到預覽元素中，從而實現在網頁上預覽用戶選擇的圖片。

總之，使用AJAX發送二進制流圖片可以實現許多有趣的功能，如實時的圖片預覽、圖片上傳等。通過將圖片轉換為Base64編碼字符串，我們可以在不刷新網頁的情況下與服務器進行交互。這為web開發帶來了更多的可能性。