之前写过一篇关于图片上传的方法,不过那都是基于上传到本地服务器上的。跟视频有所不同,因为图片比较小并不考虑到并发量,所以性能这一块没有太多的在意。如上传视频就不同了,最小一般都在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" >
<div id="sendBefore">
<p>上传视频</p>
<input id="videoForm" type="file" name="videos[]" multiple= "multiple" />
</div>
<form>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
界面如下:
点击‘上传视频后’如下界面上传中。。
上传成功之后如下:
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);
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
接下来就是你拿到视频的地址后。用video或者是用框架播放视频的过程这个不再多说,以后还会有视频开发这一块的知识分享。最后总结的点:
1)七牛官网写的API不太全,而且有些有问题这个需要你进一步去 测试2)七牛除了form这种上传方工还有七牛的SDK引用上传,不过这个已经测试过。有的视频能上传成功有的直接报404上传不了。看API还得转码较麻烦
3)在工作中遇到视频上传显示进度条的需求很常见,所以这时做个总结希望对大家有帮助