视频上传demo

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           #loadingBar{
               margin-top: 14px;
               width: 320px;
               height: 12px;
               border-radius: 12px;
               background: #eee;
           }
           #loadingBar span{
               display: inline-block;
               height: 12px;
               background: red;
               border-radius: 12px;
           }
       </style>
   </head>
   <body>
       <div class="" style="margin-bottom: 14px;">
           <input type="file" accept="video/*" id="videoForm" capture="camcorder">
           <button class="upload">上传</button>
           <div id="loadingBar">
               <span>
                   <strong></strong>
                   <i></i>
               </span>
           </div>
       </div>
       <video width="320" height="" src="" autoplay="" class="vd" controls="controls">
           当前浏览器不支持 video直接播放
       </video>
       <script src="./js/common/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           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;
           }
           }
           $(".upload").click(function(){
               //发送视频请求
       var formData = new FormData();
//       console.log($('#videoForm')[0].files[0])
   formData.append('file', $('#videoForm')[0].files[0]);
   $.ajax({
   url: '/putFile',
   type: 'POST',
   cache: false,
   data: formData,
   processData: false,
   dataType:'json',
   contentType: false,
   //利用progress监控进度
   xhr:xhrOnProgress(function(e){
   var percent = Math.round(e.loaded*100 / e.total)+'%'
   $('#loadingBar').find('span').css('width',percent);
   $('#loadingBar span').find('strong').html(percent);
   $('#loadingBar span').find('i').html('已上传'+((e.loaded/1024/1024).toFixed(1))+'MB/'+((e.total/1024/1024).toFixed(1))+'MB');
   })
   }).done(function(res) {
       $(".vd").attr('src','http://192.168.1.138:8080/ja_file'+res.url)
   }).fail(function(res) {
   console.log('res',res);
   });
           })
       </script>
   </body>
</html>

猜你喜欢