本文主要介紹HTML5中一種常用的文件上傳方式——Ajax上傳文件的實現方法。通過Ajax上傳文件，用戶無需刷新頁面，可以實現文件的異步上傳。相比傳統的表單提交方式，Ajax上傳文件更加方便、快速，能夠提升用戶的使用體驗。

在傳統的表單提交方式中，用戶需要選擇文件后，點擊提交按鈕，然后等待頁面刷新，等待服務器處理完畢后才能看到上傳結果。這樣的方式可能需要等待較長的時間，特別是在文件較大的情況下。而Ajax上傳文件則可以使用戶無需離開當前頁面，即可完成文件上傳，并在上傳過程中實時顯示上傳進度，大大提升了用戶體驗。

現在假設我們有一個上傳圖片的功能，用戶可以選擇本地圖片進行上傳，并實時顯示上傳進度。下面是一個基本的實現示例：

// HTML代碼
<input type="file" id="upload" name="upload" accept="image/*">
<button onclick="uploadFile()">上傳</button>
<progress id="progress"></progress>
// JavaScript代碼
function uploadFile() {
var fileInput = document.getElementById('upload');
var file = fileInput.files[0];
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.upload.onprogress = function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
var progress = document.getElementById('progress');
progress.value = percentComplete;
progress.innerHTML = percentComplete + '%';
}
}
xhr.onload = function (event) {
if (xhr.status === 200) {
console.log('上傳成功');
}
}
var formData = new FormData();
formData.append('upload', file);
xhr.send(formData);
}

在這個示例中，我們首先通過document.getElementById方法獲取上傳圖片的input元素，然后通過files屬性獲取用戶選擇的文件。然后創建一個XMLHttpRequest對象，通過open方法指定請求的類型（POST）和URL（/upload），并設置異步為true。接下來通過xhr.upload.onprogress事件監聽上傳進度，并實時更新進度條的狀態。在上傳完成后，通過xhr.onload事件處理上傳成功的邏輯，并在控制臺輸出"上傳成功"。最后，通過FormData對象創建一個表單，將用戶選擇的文件以upload字段的形式加入formData，并通過xhr.send方法發送請求。

Ajax上傳文件的實現還可以通過jQuery等JavaScript庫簡化代碼，比如使用jQuery的.ajax方法：

// HTML代碼
<input type="file" id="upload" name="upload" accept="image/*">
<button onclick="uploadFile()">上傳</button>
<progress id="progress"></progress>
// JavaScript代碼
function uploadFile() {
var fileInput = document.getElementById('upload');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('upload', file);
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function (event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total * 100;
var progress = document.getElementById('progress');
progress.value = percentComplete;
progress.innerHTML = percentComplete + '%';
}
}, false);
return xhr;
},
success: function (data) {
console.log('上傳成功');
}
});
}

在這個示例中，我們使用jQuery的.ajax方法發送異步請求。與之前的示例相比，這種方式更加簡潔，同時也能夠實現上傳進度的實時更新。

綜上所述，通過HTML5中的Ajax上傳文件的方式，我們可以實現在文件上傳過程中無需刷新頁面，并實時顯示上傳進度的功能。這種方式可以為用戶提供更好的使用體驗，同時也方便開發者的開發工作。