HTML5中引入了新的input類型——file，可以讓用戶選擇本地文件并將其上傳至服務(wù)器。然而，傳統(tǒng)的表單提交方式會導(dǎo)致頁面刷新，為了避免這種情況，我們可以使用Ajax技術(shù)來實(shí)現(xiàn)文件的異步上傳。本文將介紹如何使用Ajax提交input files，并通過舉例說明其用法和效果。

通常，我們可以通過兩種方式來實(shí)現(xiàn)文件的異步上傳：通過FormData對象和XMLHttpRequest對象。首先，我們來看一下使用FormData對象來提交input files。假設(shè)我們有一個(gè)表單，其中包含一個(gè)input type為file的元素以及一個(gè)提交按鈕。

<form id="myForm" enctype="multipart/form-data">
<input type="file" id="myFile">
<button type="button" onclick="uploadFile()">提交</button>
</form>

在JavaScript代碼中，我們可以通過FormData對象來收集表單數(shù)據(jù)，并構(gòu)建一個(gè)表單對象。然后，使用XMLHttpRequest對象將該表單對象發(fā)送至服務(wù)器。

function uploadFile() {
var formData = new FormData();
var file = document.getElementById("myFile").files[0];
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.onload = function() {
if (xhr.status === 200) {
alert("文件上傳成功！");
} else {
alert("文件上傳失敗！");
}
};
xhr.send(formData);
}

上述代碼創(chuàng)建了一個(gè)名為formData的FormData對象，接著通過獲取input元素的files屬性來獲取用戶選擇的文件。然后，使用append方法將文件添加到formData對象中。接下來，我們創(chuàng)建了一個(gè)XMLHttpRequest對象，并調(diào)用open方法設(shè)置請求的類型、URL以及是否為異步請求。最后，我們通過send方法將formData對象發(fā)送至服務(wù)器。

使用XMLHttpRequest對象的方式與上述方法類似。首先，我們需要獲取input files的數(shù)據(jù)，并構(gòu)建一個(gè)FormData對象。然后，通過XMLHttpRequest對象的send方法發(fā)送請求。

function uploadFile() {
var file = document.getElementById("myFile").files[0];
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
alert("文件上傳成功！");
} else {
alert("文件上傳失敗！");
}
}
};
xhr.open("POST", "upload.php", true);
xhr.send(formData);
}

需要注意的是，以上兩種方式都需要將表單的enctype屬性設(shè)置為"multipart/form-data"，以支持文件上傳。另外，我們還可以通過XMLHttpRequest對象的upload屬性來監(jiān)聽文件上傳的進(jìn)度。

xhr.upload.onprogress = function(event) {
var percent = event.loaded / event.total * 100;
console.log("上傳進(jìn)度：" + percent + "%");
};

值得一提的是，由于安全性方面的考量，瀏覽器限制了通過Ajax提交input files的能力。一般來說，我們只能在用戶主動觸發(fā)事件（例如點(diǎn)擊按鈕）的情況下，才能獲取并提交input files的數(shù)據(jù)。這一限制是為了確保用戶授權(quán)的安全性。

綜上所述，通過Ajax提交input files可以實(shí)現(xiàn)文件的異步上傳，而不會導(dǎo)致頁面的刷新。使用FormData對象和XMLHttpRequest對象，我們可以簡單地將用戶選擇的文件發(fā)送至服務(wù)器，并獲取上傳結(jié)果。通過舉例和講解，我們希望能夠幫助讀者更好地理解和應(yīng)用這一技術(shù)。