AJAX技術是一種前端開發中常用的技術，可以實現無刷新的數據交互。其中，AJAX圖片上傳到action是一個比較常見的需求，非常實用。本文將詳細介紹如何使用AJAX技術實現圖片上傳到后端action的功能。

在一個社交網站上，用戶需要上傳自己的頭像作為個人資料的展示。傳統的方式是用戶選擇頭像文件后，通過表單提交到后臺，然后后臺再將文件保存到服務器上。這樣的方式需要刷新整個頁面，用戶體驗較差。而使用AJAX圖片上傳到action的方式，用戶可以在不刷新頁面的情況下完成文件上傳，大大提升了用戶體驗。

首先，我們需要一個包含文件上傳功能的表單，并在表單中添加一個用于顯示預覽圖片的元素。HTML代碼如下：

<form id="uploadForm"><input type="file" id="fileInput" name="file" onchange="previewImage(this)" /><br/><img id="preview" src="#" alt="preview" /><button type="button" onclick="upload()">上傳圖片</form>

接下來，我們需要編寫JavaScript代碼來實現AJAX圖片上傳功能。首先，我們需要添加`previewImage`函數，該函數用于預覽用戶所選擇的圖片：

function previewImage(fileInput) {
// 獲取預覽圖片的元素
var preview = document.getElementById("preview");
// 獲取文件對象
var file = fileInput.files[0];
// 創建文件讀取器
var reader = new FileReader();
// 文件讀取完成后的回調函數
reader.onload = function(e) {
// 將讀取到的圖片數據賦值給預覽圖片元素的src屬性
preview.src = e.target.result;
}
// 讀取文件
reader.readAsDataURL(file);
}

上述代碼中，我們使用了`FileReader`對象來讀取用戶選擇的圖片文件，并將讀取到的圖片數據賦值給`preview`元素的`src`屬性，從而實現預覽功能。

接下來，我們需要編寫`upload`函數，該函數用于將預覽的圖片上傳到后端action。代碼如下：

function upload() {
// 獲取文件上傳表單元素
var form = document.getElementById("uploadForm");
// 創建FormData對象
var formData = new FormData(form);
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽上傳過程的回調函數
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
console.log("上傳進度：" + percent.toFixed(2) + "%");
}
}
// 監聽上傳完成的回調函數
xhr.onload = function() {
if (xhr.status === 200) {
console.log("上傳成功");
} else {
console.log("上傳失敗");
}
}
// 發送AJAX請求
xhr.open("POST", "upload.action");
xhr.send(formData);
}

上述代碼中，我們創建了一個`FormData`對象，將文件上傳表單元素傳入其中。然后，使用`XMLHttpRequest`對象發送一個POST請求到后臺action，同時傳入`formData`對象。在上傳過程中，我們可以監聽上傳進度和上傳完成事件，并做出相應的處理。

通過以上的代碼實現，我們可以輕松地使用AJAX技術將圖片上傳到后端action。這樣的方式不僅提升了用戶體驗，還可以減少頁面的刷新次數，提高了頁面的響應速度。在實際開發中，我們可以根據具體需求進行相應的改進和優化。