js实现带上传进度的文件上传

时间：2021-04-28 19:46:01
//获取文件筐的文件集合

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;

}

相关文章