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

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

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

在JavaScript代碼中，我們可以通過FormData對象來收集表單數據，并構建一個表單對象。然后，使用XMLHttpRequest對象將該表單對象發送至服務器。

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);
}

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

使用XMLHttpRequest對象的方式與上述方法類似。首先，我們需要獲取input files的數據，并構建一個FormData對象。然后，通過XMLHttpRequest對象的send方法發送請求。

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屬性設置為"multipart/form-data"，以支持文件上傳。另外，我們還可以通過XMLHttpRequest對象的upload屬性來監聽文件上傳的進度。

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

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

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