本文將介紹如何使用Ajax上傳input文件類型為圖片的操作，并給出相應的代碼示例。上傳圖片是網頁開發中常見的操作之一，例如用戶上傳頭像、上傳文章中的圖片等。使用Ajax可以實現圖片的實時上傳，提高用戶體驗。

在網頁中，常常會有用戶上傳頭像的需求。我們可以使用input標簽的file類型來實現文件選擇的功能。當用戶選擇圖片后，可以使用Ajax將圖片上傳到服務器。

<input type="file" id="avatar">
<button onclick="uploadImage()">上傳</button>
<script>
function uploadImage() {
var file = document.getElementById('avatar').files[0];
var formData = new FormData();
formData.append('image', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('圖片上傳成功');
}
};
xhr.send(formData);
}
</script>

以上是一個簡單的上傳圖片的示例代碼。首先，我們通過getElementById獲取到id為avatar的input元素，并獲取到用戶選擇的文件;然后，創建一個FormData對象，并使用append方法將文件添加到其中;接下來，創建一個XMLHttpRequest對象，并使用open方法指定請求的方法、URL和是否異步;設置onreadystatechange回調函數，當readyState為4且status為200時，表示上傳成功;最后，使用send方法發送請求。

除了上傳頭像外，我們還可以在文章編輯頁面實現用戶上傳圖片的功能。比如，用戶可以在編輯器中插入一張圖片，并將其上傳到服務器。

<input type="file" id="image">
<button onclick="insertImage()">插入圖片</button>
<script>
function insertImage() {
var file = document.getElementById('image').files[0];
var formData = new FormData();
formData.append('image', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var imageUrl = xhr.responseText;
var imageElement = document.createElement('img');
imageElement.src = imageUrl;
document.getElementById('editor').appendChild(imageElement);
}
};
xhr.send(formData);
}
</script>
<div id="editor"></div>

在上述代碼中，我們通過insertImage函數實現了插入圖片的功能。首先，獲取到id為image的input元素并獲取用戶選擇的文件;然后，創建一個FormData對象并將文件添加到其中;接下來，創建一個XMLHttpRequest對象，并使用open方法指定請求的方法、URL和是否異步;設置onreadystatechange回調函數，當readyState為4且status為200時，表示上傳成功;在回調函數中，從服務器返回的響應中獲取到圖片的URL，并創建一個img元素并設置其src屬性，最后將該元素添加到id為editor的容器中。

通過上述示例，我們可以看到，使用Ajax上傳input圖片是比較簡單的。首先，獲取到用戶選擇的文件，將其添加到FormData對象中;接著，創建一個XMLHttpRequest對象，使用open方法設置請求的方法、URL和是否異步;在回調函數中處理服務器返回的響應，完成相應的操作。通過Ajax實現圖片的實時上傳，可以提高用戶的使用體驗。