带进度显示的视频上传

最新推荐文章于 2021-03-11 18:20:43 发布

爬行者c

最新推荐文章于 2021-03-11 18:20:43 发布

阅读量532

点赞数 2

分类专栏： JavaScript 文章标签： jquery js ajax

本文链接：https://blog.csdn.net/weixin_43594183/article/details/104540448

版权

JavaScript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

太久太久太久没有更新博客了。。。。。。。
今天做了一个带进度条的视频上传，做个小结。

实现效果如下：

效果图

实现原理：

给XMLHttpRequest对象的upload属性绑定onprogress方法监听视频上传的过程。
因为jq的XMLHttpRequest对象默认内部生成了，但用户也可以通过 xhr （默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest , jQuery 1.3 之前不可用）选项来传递一个自己创建的 xhr 对象。

部分代码：

<!--视频上传进度显示-->       
<div class="upload-status">
         <div class="name"></div>
	    <div class="progress">
         <div class="progress-status"></div>
         <span class="num"></span>
		 </div>
  </div>

/*视频上传进度*/
.upload-status{
  display:none;
  height:116px;
  background:rgba(252,242,239,1);
  border-radius:0px 0px 4px 4px;
  padding-top:30px;
  padding-left:140px;
  box-sizing:border-box;
  margin-bottom: 20px;
}
.upload-status .name{
  margin-bottom:12px;
  font-size:16px;
}
.upload-status .progress{
  width:417px;
  height:14px;
  background:rgba(235,137,27,0.1);
  border-radius:4px;
  position:relative;
}
.upload-status .progress-status{
  width:0%;
  height:14px;
  background:rgba(235,137,27,1);
  border-radius:4px;
}
.upload-status .num{
  position:absolute;
     top: -5px;
    right: -100px;
}

 //封装方法，给XMLHttpRequest对象绑定监听函数
 //此段代码源自网上
let xhrOnProgress=function(fun) {
	//绑定监听
    xhrOnProgress.onprogress = fun; 
        //使用闭包实现监听绑定
        return function() {
            //获得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({
      type: 'POST',
      url: url,//视频上传接口地址
      dataType: 'json',
      data: formData,//发送数据
      contentType: false,//不处理contentType
      processData: false,//不处理表单数据
      xhr:xhrOnProgress(function(e){   
      	 //event.total是需要传输的总字节，event.loaded是已经传输的字节         
          var percent = (e.loaded / e.total * 100).toFixed(2);
           console.log(percent); 
           //进度更新显示
           $('.upload-status .num').html( percent + "%");
           $('.progress-status').css('width', percent + "%");
      }),
       success: function(data) {
       },
       error: function(data) {          
       }
    });