轉自：https://javaweb.io/post/63

XMLHttpRequest例項的upload屬性可以新增一個事件progress,通過該事件回撥可以獲取到上傳進度資訊

原生上傳

//獲取檔案筐的檔案集合
let files = document.getElementById("file").files;
//建立FormData物件
let formData = new FormData();
//新增第一個檔案到FormData
formData.append("file",files[0]);
//新增普通資料
formData.append("name","KevinBlandy");
//建立非同步物件
let xhr = new XMLHttpRequest();
//開啟連線
xhr.open('POST','/test/upload',true);
//監聽上傳事件
if(xhr.upload){
    //監聽上傳屬性的上傳事件,每次上傳事件都會執行 progressHandlingFunction
    xhr.upload.addEventListener('progress',progressHandlingFunction, false);
    //xhr.upload.progress = function(){}            也可以
}
//執行上傳
xhr.send(formData);
//上傳監聽
function progressHandlingFunction(event) {
    event.total;        //獲取上傳檔案的總大小
    event.loaded;        //獲取已經上傳的檔案大小
    //獲取進度的百分比值
    let percent  = (event.loaded / event.total) * 100;
    //四捨五入保留兩位小數
    percent = percent.toFixed(2);
}
 

Jquery

//獲取檔案框的檔案集合
let files = $('#file')[0].files;
//建立FormData物件
let formData = new FormData();
//新增第一個檔案到FormData
formData.append("file",files[0]);
//新增普通屬性
formData.append("name","KevinBlandy");
$.ajax({
    url : '${ctxPath}/test/upload',
    type : 'POST',
    data : formData,
    xhr: function(){
        //獲取到原生的 XMLHttpRequest 物件
        let myXhr = $.ajaxSettings.xhr();
        //非同步上傳物件帶上傳屬性
        if(myXhr.upload){            
            //監聽上傳屬性的上傳事件,每次上傳事件都會執行 progressHandlingFunction
            myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
            //myXhr.upload.progress = function(){}            也可以
        }
        return myXhr;
    },
    processData : false,
    contentType : false,
    success : function(response) {
    },
    error : function(response) {
    },
});
function progressHandlingFunction(event) {
    event.total;        //獲取上傳檔案的總大小
    event.loaded;        //獲取已經上傳的檔案大小
    //獲取進度的百分比值
    let percent  = (event.loaded / event.total) * 100;
    //四捨五入保留兩位小數
    percent = percent.toFixed(2);
}