获取文件上传进度php,js如何获取文件上传进度?js获取文件上传进度的代码

本篇文章给大家带来的内容是关于js如何获取文件上传进度?js获取文件上传进度的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

},

})

}

完整代码:

Document

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;

}

}

function Submit(){

var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象

var formFile = new FormData();

formFile.append("file", fileObj); //加入文件对象

var data = formFile;

$.ajax({

url: "http://up.qiniu.com/",

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

},

})

}

相关文章推荐:

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值