「上传视频」js上传视频方法及监控进度

上传视频

之前写过一篇关于图片上传的方法，不过那都是基于上传到本地服务器上的。跟视频有所不同，因为图片比较小并不考虑到并发量，所以性能这一块没有太多的在意。如上传视频就不同了，最小一般都在10M以上。如果并发同时多人上传的传。服务器带宽占满，站点访问就会出现各种问题，所以需要上传到第三方的云服务器上，今天我以七牛云为主。

做之前一样先规下思路。图片和视频都是从本地上传的。如果走HTML5的方法在本地执行也可以，不过你懂的不太好用不兼容。一般常用的还是form.走form提交时注意的坑有：

1）如果整个页面有form表单在外面，你在里面再加form是不可行的。默认浏览器就会把你的form去掉了。只能动太添加，还有别的一个解决方案，可以不加form,创建formDate对象也是可以的

2）input file添加完了视频/图片时，第二次再添相同的名称的文件是不可以的。其实这也是为了安全考虑，解决方法是每次change时，把当前的vlaue清空了

需求是点击‘上传视频’安钮，出现上传加载监控条。成功之后截取视频弟一帧的图片展示出来。点击封面后在当前的页面播放查看。

结构代码：

<form id="myform" name="myform" action="your_url" method="post" enctype="multipart/form-data" >

    <p id="sendBefore">
         <p>上传视频</p>
        <input id="videoForm" type="file" name="videos[]" multiple= "multiple" />
    </p>  
<form>

界面如下：

这里写图片描述

点击‘上传视频后’如下界面上传中。。

这里写图片描述

上传成功之后如下：

这里写图片描述

JS实现：

1》查看七牛官网提供的上传地址。（此处有坑）默认提供的URL上传出错。返回一个别的URL拿到以后才可以上传成功

登陆七牛后台的一些设置拿到KEY。然后给到前端一个请求连接，拿到token。把token和当前的文件传给七牛，七牛会返回一个 name拿到以后根据自己的域拼接成一个访问的视频地址即可，七年文档API访问地址如下：

https://developer.qiniu.com/kodo/manual/1234/upload-types

2》上传前文件大小及文件名字的获取代码如下：

$('#videoForm').on('change',function(){
   //获取当前上传的文件名字
  var fileVal=$(this).val();
  var fileName=fileVal.substring(fileVal.lastindexof("\\")+1);
  //判断浏览器
  var isIE = /msie/i.test(navigator.useragent) && !window.opera;
  var token='';
  var fileSize = 0;
  // IE浏览器
  if (isIE && !this.files) { 
     //获得上传文件的绝对路径   
      var filePath = this.value;                    
      var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
      var file = fileSystem.GetFile(filePath);
      // 文件大小单位b
      fileSize = file.Size;   
   }else {  
       //其他浏览器  
       fileSize = this.files[0].size;
   }
   var size = fileSize / 1024 / 1024;
   //计算M
   if (size > 10) {
      alert("视频大小不能超过10M");
      $('#videoForm').val('');
      return;
    }    
`});``


3》上传视频时监控当前的进度和上传大小的代码：

  $.ajax({
      //获取后台给你下发的token
      url: 'your_get_tokenURL',
      type: 'GET',
      dataType:'json',
      async:false 
  }).done(function(res){
      token=res.youtoken;
      //发送视频请求
      var formData = new FormData(),  
          //七牛给你的域名  
          vistUrl  = 'you_vist_url',     
          fS       = null,
          fStota   = null;    
          //必传的二个值当前的文件和你的token验证 
          formData.APPend('file', $('#videoForm')[0].files[0]);
          formData.append('token',token)
                $.ajax({
                    url: '七牛的上传地址',
                    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/1204/1024).toFixed(1))+'MB/'+((e.total/1024/1024).toFixed(1))+'MB'); 
                    })
                }).done(function(res) {                  
                    //拼接返回的视频地址，这里的vframe/jpb/offset/1是七牛的视频截取图片的接口          
                    $('.v-box').find('img').attr('src',vistUrl+res.hash+'?vframe/jpg/offset/1').show();                    
                    $('#videoForm').val('');                    

                }).fail(function(res) {
                    console.log(res);
                });
            }).fail(function(res){
                console.log(res);
            })

接下来就是你拿到视频的地址后。用video或者是用框架播放视频的过程这个不再多说，以后还会有视频开发这一块的知识分享。最后总结的点：

1）七牛官网写的API不太全，而且有些有问题这个需要你进一步去测试

2）七牛除了form这种上传方工还有七牛的SDK引用上传，不过这个已经测试过。有的视频能上传成功有的直接报404上传不了。看API还得转码较麻烦

3）在工作中遇到视频上传显示进度条的需求很常见，所以这时做个总结希望对大家有帮助

“`

js上传视频方法及监控进度

上传视频

相关阅读

栏目导航

推荐阅读

热门阅读