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" >

<
4000
div id="sendBefore">
<p>上传视频</p>
<input id="videoForm" type="file" name="videos[]" multiple= "multiple" />
</div>
<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）在工作中遇到视频上传显示进度条的需求很常见，所以这时做个总结希望对大家有帮助

“`