阅读 335

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

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐