關(guān)于使用jQuery AJAX獲取進(jìn)度,我們需要使用jQuery中的ajax()函數(shù),該函數(shù)允許我們向服務(wù)器發(fā)送請(qǐng)求,并在異步請(qǐng)求期間執(zhí)行回調(diào)函數(shù)。
在AJAX請(qǐng)求過(guò)程中,可以使用xhr 對(duì)象獲取數(shù)據(jù)傳輸?shù)倪M(jìn)度。XHR對(duì)象(XMLHttpRequest對(duì)象)是AJAX請(qǐng)求的核心對(duì)象,通過(guò)監(jiān)聽(tīng)xhr.upload.onprogress事件和xhr.onprogress事件,我們可以捕捉數(shù)據(jù)上傳和下載的進(jìn)度。
$.ajax({ type: "POST", url: "api/upload", data: formData, cache: false, contentType: false, processData: false, xhr: function () { var xhr = new window.XMLHttpRequest(); // 上傳進(jìn)度 xhr.upload.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total * 100; console.log(percentComplete + '%'); } }, false); // 下載進(jìn)度 xhr.addEventListener("progress", function (evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total * 100; console.log(percentComplete + '%'); } }, false); return xhr; }, success: function (result) { console.log('上傳成功'); }, error: function (xhr, status, error) { console.log('上傳失敗'); } });
上述代碼演示了如何使用jQuery AJAX獲取上傳和下載的進(jìn)度。XHR對(duì)象的upload屬性和onload屬性可以幫助我們捕捉進(jìn)度事件。其中,upload屬性是上傳時(shí)的進(jìn)度事件,而onprogress屬性則是下載時(shí)的進(jìn)度事件。我們可以通過(guò)計(jì)算已上傳或已下載的字節(jié)數(shù)與總字節(jié)數(shù)的比例來(lái)計(jì)算進(jìn)度百分比。
需要注意的是,如果我們使用FormData對(duì)象上傳文件,則需要設(shè)置contentType選項(xiàng)為false,否則會(huì)報(bào)“Illegal invocation”錯(cuò)誤。