AJAX技術(shù)是一種前端開發(fā)中常用的技術(shù)，可以實(shí)現(xiàn)無刷新的數(shù)據(jù)交互。其中，AJAX圖片上傳到action是一個(gè)比較常見的需求，非常實(shí)用。本文將詳細(xì)介紹如何使用AJAX技術(shù)實(shí)現(xiàn)圖片上傳到后端action的功能。

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

首先，我們需要一個(gè)包含文件上傳功能的表單，并在表單中添加一個(gè)用于顯示預(yù)覽圖片的元素。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代碼來實(shí)現(xiàn)AJAX圖片上傳功能。首先，我們需要添加`previewImage`函數(shù)，該函數(shù)用于預(yù)覽用戶所選擇的圖片：

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

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

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

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

上述代碼中，我們創(chuàng)建了一個(gè)`FormData`對(duì)象，將文件上傳表單元素傳入其中。然后，使用`XMLHttpRequest`對(duì)象發(fā)送一個(gè)POST請(qǐng)求到后臺(tái)action，同時(shí)傳入`formData`對(duì)象。在上傳過程中，我們可以監(jiān)聽上傳進(jìn)度和上傳完成事件，并做出相應(yīng)的處理。

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