目前，網(wǎng)絡(luò)中的數(shù)據(jù)傳輸已經(jīng)越來越重要，而文件上傳是其中的一項常見操作。為了提升用戶體驗，顯示上傳進度條是一個非常有效的方式。本文將通過使用jQuery插件$.ajax，結(jié)合HTML5中的FormData對象，實現(xiàn)文件上傳并顯示上傳進度條的功能。通過這個實例，希望讀者能夠理解進度條的作用，并掌握如何利用$.ajax上傳文件并顯示進度。具體實現(xiàn)代碼如下： ```javascript // HTML結(jié)構(gòu)

Upload

// JavaScript代碼 $(document).ready(function() { // 點擊上傳按鈕觸發(fā)上傳事件 $('#uploadButton').click(function() { var fileInput = $('#fileInput')[0].files[0]; // 創(chuàng)建FormData對象 var formData = new FormData(); formData.append('file', fileInput); // 發(fā)送上傳請求 $.ajax({ url: 'upload.php', type: 'POST', data: formData, cache: false, processData: false, contentType: false, xhr: function() { // 創(chuàng)建XMLHttpRequest對象 var xhr = new window.XMLHttpRequest(); // 監(jiān)聽進度事件 xhr.upload.addEventListener('progress', function(event) { if (event.lengthComputable) { var progress = Math.round((event.loaded / event.total) * 100); $('#progressBar').css('width', progress + '%'); } }, false); return xhr; }, success: function(response) { // 上傳成功后的處理邏輯 console.log('上傳成功'); } }); }); }); ``` 以上代碼使用了FormData對象，該對象用于創(chuàng)建表單數(shù)據(jù)。首先，我們通過選擇文件的input元素獲取用戶上傳的文件。然后，創(chuàng)建FormData對象，并將文件添加到FormData中。 之后，我們使用$.ajax方法發(fā)送上傳請求。在xhr選項中，創(chuàng)建了一個XMLHttpRequest對象，并監(jiān)聽進度事件。在事件處理函數(shù)中，我們計算上傳進度，然后將進度值設(shè)置為進度條的寬度，以實時顯示上傳進度。 在上傳成功后，服務(wù)器將會返回一個相應(yīng)的信息。你可以在success回調(diào)函數(shù)中處理這個信息，例如，顯示一個上傳成功的提示信息。 通過上述代碼，我們實現(xiàn)了顯示上傳進度條的功能。在實際使用中，你可以根據(jù)你的實際需求進行進一步的定制和擴展。