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

登录后复制

完整代码:

nbsp;html>    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);                   },               })}

登录后复制

相关文章推荐：

如何使用原生JavaScript实现轮播图？代码详解

js取整数、取余数的案例详解（附代码）

【js】：检测用户输入、文本框默认样式设置、设计表格样式实现全选反选

以上就是js如何获取文件上传进度？js获取文件上传进度的代码的详细内容，更多请关注【创想鸟】其它相关文章！