js如何获取文件上传进度？
- 工作小总结
- 时间：2022-02-19 10:58
- 2635人已阅读
简介
使用JS上传文件的时候，如果获取文件上传的进度呢？
🔔🔔🔔好消息!好消息!🔔🔔🔔
有需要的朋友👉:联系凯哥
js监听：
var xhrOnProgress=function(fun) {
xhrOnProgress.onprogress = fun; //绑定监听
//使用闭包实现监听绑
return function() {
//通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
var xhr = $.ajaxSettings.xhr();
//判断监听函数是否为函数
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
//如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}ajax文件上传函数：
function Submit(){
var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
var formFile = new FormData();
formFile.append("file", fileObj); //加入文件对象
var data = formFile;
$.ajax({
url: url,
data: data,
type: "Post",
dataType: "json",
cache: false,//上传文件无需缓存
processData: false,//用于对data参数进行序列化处理 这里必须false
contentType: false, //必须
xhr:xhrOnProgress(function(e){
var percent=e.loaded/e.total;//文件上传百分比
console.log(percent);
}),
success: function (result) {
console.log(result);
},
})
}核心代码：
xhr:xhrOnProgress(function(e){
var percent=e.loaded/e.total;//文件上传百分比
console.log(percent);
}),https://www.cnblogs.com/kaicy/p/14748858.html