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

Upload

// JavaScript代碼 $(document).ready(function() { // 點(diǎn)擊上傳按鈕觸發(fā)上傳事件 $('#uploadButton').click(function() { var fileInput = $('#fileInput')[0].files[0]; // 創(chuàng)建FormData對(duì)象 var formData = new FormData(); formData.append('file', fileInput); // 發(fā)送上傳請(qǐng)求 $.ajax({ url: 'upload.php', type: 'POST', data: formData, cache: false, processData: false, contentType: false, xhr: function() { // 創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new window.XMLHttpRequest(); // 監(jiān)聽(tīng)進(jì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對(duì)象，該對(duì)象用于創(chuàng)建表單數(shù)據(jù)。首先，我們通過(guò)選擇文件的input元素獲取用戶(hù)上傳的文件。然后，創(chuàng)建FormData對(duì)象，并將文件添加到FormData中。 之后，我們使用$.ajax方法發(fā)送上傳請(qǐng)求。在xhr選項(xiàng)中，創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，并監(jiān)聽(tīng)進(jìn)度事件。在事件處理函數(shù)中，我們計(jì)算上傳進(jìn)度，然后將進(jìn)度值設(shè)置為進(jìn)度條的寬度，以實(shí)時(shí)顯示上傳進(jìn)度。 在上傳成功后，服務(wù)器將會(huì)返回一個(gè)相應(yīng)的信息。你可以在success回調(diào)函數(shù)中處理這個(gè)信息，例如，顯示一個(gè)上傳成功的提示信息。 通過(guò)上述代碼，我們實(shí)現(xiàn)了顯示上傳進(jìn)度條的功能。在實(shí)際使用中，你可以根據(jù)你的實(shí)際需求進(jìn)行進(jìn)一步的定制和擴(kuò)展。