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;
}