获取文件上传进度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);

},

})

}

相关文章推荐：