首页 > Web开发 > 详细

js如何获取文件上传进度?

时间:2021-05-09 23:49:30      阅读:31      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

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

                   }),

 

js如何获取文件上传进度?

原文:https://www.cnblogs.com/kaicy/p/14748858.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!