AJAX是一種前端技術，通過異步JavaScript和XML（或者JSON）來實現與服務器端的數據交互。在Web開發中，Ajax已經成為常用的技術，可以實現無刷新的數據交互。而圖片上傳是Web應用中常見的功能之一，本文將介紹如何使用Ajax進行圖片上傳表單提交。

要實現圖片上傳表單提交，首先需要一個包含上傳文件的表單。我們可以使用HTML的form元素，并設置enctype屬性為multipart/form-data，這樣表單就支持文件上傳了。

<form id="uploadForm" action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image">
<input type="button" value="上傳" onclick="uploadImage()">
</form>

在上面的代碼中，我們創建了一個表單，其中包含一個文件選擇輸入框和一個按鈕。當用戶點擊按鈕時，會觸發一個名為uploadImage的JavaScript函數，用于上傳圖片。

接下來，我們需要編寫uploadImage函數。這個函數將使用Ajax來實現異步圖片上傳。在函數中，我們首先獲取用戶選擇的圖片文件：

function uploadImage() {
var file = document.getElementById("image").files[0];
}

然后，我們可以使用FormData對象來創建一個表單數據對象，并把圖片文件添加到該對象中：

function uploadImage() {
var file = document.getElementById("image").files[0];
var formData = new FormData();
formData.append("image", file);
}

接下來，我們需要創建一個XMLHttpRequest對象，用于發送異步請求。然后，我們可以使用open()方法指定請求的類型和URL，并使用send()方法發送請求。同時，我們還需要提供一個回調函數，用來處理服務器端的響應：

function uploadImage() {
var file = document.getElementById("image").files[0];
var formData = new FormData();
formData.append("image", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.send(formData);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 處理服務器端響應的代碼
}
};
}

在上面的代碼中，我們使用POST方法向upload.php發送了一個異步請求。當服務器端響應完成時，回調函數會執行。我們可以在回調函數中對服務器端的響應進行處理，比如刷新頁面或顯示上傳成功的消息。

最后，我們需要在服務器端處理圖片上傳的請求。這需要使用后端技術，比如PHP。在upload.php中，我們可以使用$_FILES超級全局變量來獲取上傳的文件。然后，我們可以將文件保存到指定的目錄，并返回一個響應給客戶端。

if ($_FILES["image"]["error"] == UPLOAD_ERR_OK) {
$tmp_name = $_FILES["image"]["tmp_name"];
$name = $_FILES["image"]["name"];
move_uploaded_file($tmp_name, "uploads/" . $name);
echo "上傳成功";
} else {
echo "上傳失敗";
}

上面的代碼中，我們首先檢查上傳的文件是否有錯誤，如果沒有錯誤，我們將文件從臨時目錄移動到指定的目錄。最后，我們向客戶端返回一個上傳成功的響應或上傳失敗的響應。

通過使用以上的代碼和步驟，我們可以實現一個使用Ajax進行圖片上傳表單提交的功能。當用戶選擇了圖片文件并點擊上傳按鈕時，圖片會被異步上傳到服務器，并得到服務器端的響應。這樣，我們可以實現無刷新的圖片上傳功能。