Js上传视频带进度条

开发工具与关键技术：Visual Studio 2015、C#
作者：曾浩源
撰写时间：2019年07月07日

直接上图和代码：
页面样式：
上传前
上传中：

上传后：

Css样式：

 .videoAlbumContent video{
   	width: 240px;
    height: 112px;
   	border: solid 1px #000000;
    margin-right: 20px;
    margin-bottom: 40px;
    padding: 0.5px 0px 0.5px 0px;
 }
 
 .videoAlbumContent div {
   	position: relative;
    float: left;
 }

 .videoAlbumContent span {
    position: absolute;
    top: 120px;
    left: 40px;
    cursor: pointer;
 }

 .videoAlbumContent a {
    color: #2A72C5;
    text-decoration: none;
    margin-left: 70px;
 }

HTML内容：

<input type="file" name="files" style="display:none;" id="videoOneP" onchange="UpladFile()" accept="video/MP4,video/3GP,video/AVI,video/MKV,video/WMV,video/MPG,video/VOB,video/FLV,video/SWF,video/MOV,video/rmvb,video/mp3,video/wav,video/webm" />

<div class="layui-form-item">
   <label class="layui-form-label">视频内容</label>
   <div class="layui-input-inline">
       <button class="layui-btn layui-btn-normal" onclick='$("#videoOneP").click();' type="button">上传视频</button>
       <span id="videoName"></span>
       <!--上传速度显示-->
       <span id="time" style="display:inline-block;width:240px;"></span> 
   </div>
   <!--进度条-->
   <div class="layui-input-inline line" style="margin-top:15px;display:none;">
       <div class="layui-progress">
           <div class="layui-progress-bar" lay-percent="0%"></div>
       </div>
       <div class="el-progress__text" style="font-size: 14.4px;">0%</div>
   </div>
</div>
<div class="layui-form-item" id="videoOnePShow" style="display:none;">
   <div id="videoOnePContent" class="layui-input-block videoAlbumContent">

   </div>
</div>

Input用来触发上传文件，使用accept现在上传类型。
使用的是layui的按钮，进度条。进度条只需要修改width属性就可以改变进度条了。

获取到文件名，并显示到页面上。

 var xhr;//异步请求对象
 var ot; //时间
  var oloaded;//大小
  //上传文件方法
  function UpladFile() {
      $("#videoOnePContent").html("");
      var fileObj = document.getElementById("videoOneP").files[0]; // js 获取文件对象
      if (fileObj.name) {
          $("#videoName").text(fileObj.name);
          var url = "video"; // 接收上传文件的后台地址
          var form = new FormData(); // FormData 对象
          form.append("files", fileObj); // 文件对象
          form.append("code", $("#code").val()); // 文件对象
          xhr = new XMLHttpRequest(); // XMLHttpRequest 对象
          xhr.open("post", url, true); //post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
        
          xhr.upload.onprogress = progressFunction; //【上传进度调用方法实现】
          xhr.upload.onloadstart = function () { //上传开始执行方法
              ot = new Date().getTime(); //设置上传开始时间
              oloaded = 0; //设置上传开始时，以上传的文件大小为0
          };
          xhr.send(form); //开始上传，发送form数据
         
          xhr.onload = uploadComplete; //请求完成
          xhr.onerror = uploadFailed; //请求失败
      }

上传进度实现方法，上传过程中会频繁调用该方法

function progressFunction(evt) {
     $("#time").css("display", "block");
     // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
     if (evt.lengthComputable) {
         $(".line").css("display", "block");
         /*进度条显示进度*/
         $(".layui-progress-bar").attr("lay-percent", Math.round(evt.loaded / evt.total * 100));
         $(".layui-progress-bar").css("width", Math.round(evt.loaded / evt.total * 100) + "%");
         $(".el-progress__text").html(Math.round(evt.loaded / evt.total * 100) + "%");
     }

     var time = document.getElementById("time");
     var nt = new Date().getTime(); //获取当前时间
     var pertime = (nt - ot) / 1000; //计算出上次调用该方法时到现在的时间差，单位为s
     ot = new Date().getTime(); //重新赋值时间，用于下次计算

     var perload = evt.loaded - oloaded; //计算该分段上传的文件大小，单位b
     oloaded = evt.loaded; //重新赋值已上传文件大小，用以下次计算

     //上传速度计算
     var speed = perload / pertime; //单位b/s
     var bspeed = speed;
     var units = 'b/s'; //单位名称
     if (speed / 1024 > 1) {
         speed = speed / 1024;
         units = 'k/s';
     }
     if (speed / 1024 > 1) {
         speed = speed / 1024;
         units = 'M/s';
     }
     speed = speed.toFixed(1);
     //剩余时间
     var resttime = ((evt.total - evt.loaded) / bspeed).toFixed(1);
     time.innerHTML = '上传速度：' + speed + units + ',剩余时间：' + resttime + 's';
     if (bspeed == 0)
         time.innerHTML = '上传已取消';
 }

上传成功响应和上传失败

//上传成功响应
        function uploadComplete(evt) {
            var date =jQuery.parseJSON(evt.target.responseText);
            if (date.State) {
                $("#videoOnePContent").append('<div><video src="' + date.Msg + '"preload controls /><input type="hidden" name="videoAlbum[0]" value="' + date.Msg + '"></video><span><a οnclick="Deleectvideo(this)">删除</a></span>');
                $("#videoOnePShow").css("display", "block");
                $("#time").css("display", "none");
            } else {
                layui.use('layer', function () {
                    //赋值
                    layui.layer.msg("上传失败！", { offset: '150px' });
                });
            }
        }
        //上传失败
        function uploadFailed(evt) {
            layui.use('layer', function () {
                //赋值
                layui.layer.msg("上传失败！", { offset: '150px' });
            });
        }