js實現帶上傳進度的文件上傳

//獲取文件筐的文件集合
var files = document.getElementById("file1").files;
//創建FormData對象  相當於參數集合  存儲方式是鍵值對
var formData = new FormData();
//添加第一個文件到FormData
formData.append("file", files[0]);
//添加普通數據  後臺直接參數接受
formData.append("name", "KevinBlandy");
//創建非同步對象
var xhr = new XMLHttpRequest();
//打開連接
xhr.open('POST', '/Home/UpFile', 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;
           
        //四捨五入保留0位小數
        percent = percent.toFixed(0);
        
        var jd = document.getElementById("jd");
        jd.value = percent;
}