标签:render 方法 span com attr htm box ons 需要
layui官方上传视频时并没直接提供获取视频时长的方法,需要我们间接获得
HTML增加一个<video>标签,因为video标签可以帮我们获取视频时长
<video id="videoattr" width="250" height="100" ></video>
当然,你也可以设置隐藏。
然后JS就可以利用<video>的duration来得到时长。
//同时绑定多个元素,并将属性设定在元素上 upload.render({ elem: ‘.upload-menu‘, url: ‘http://upload-z2.qiniup.com‘,//上传到七牛云 multiple: false, //是否允许多文件上传。设置 true即可开启。不支持ie8/9 bindAction:‘#add‘, accept:‘video‘, size:10240,//KB,不能大于10M auto:false,//自动上传 data:{ token: function(){ var token; $.ajax({ async: false,//ajax 非异步获取taken type: ‘post‘, url: ‘{:url(‘Articles/getToken‘)}‘, success: function (res) { token = res; } }); return token; } }, choose:function(obj){ //预读本地文件示例,不支持ie8 layer.load(2); obj.preview(function(index, file, result){ var url = URL.createObjectURL(file);//把file转成URL $(‘#videoattr‘).attr(‘src‘, url); //视频链接 var timer = setTimeout(function(){ layer.close(layer.index); var video_time = document.getElementById("videoattr").duration;//视频时长 console.log(video_time); if(video_time>60){ layer.msg(‘上传视频不能超过60秒‘, {icon: 2}) }else{ $(‘#add‘).css("visibility","visible"); //一开始先将确认上传按钮隐藏,得到视频时长后才开放 } clearTimeout(timer); },1000); }); }, before: function(obj) { //console.log(obj); layer.msg(‘上传中...‘, { icon: 16, shade: 0.01, time: 0 }) }, done: function(res) { console.log(res.data); //return false; layer.close(layer.msg(‘上传成功!‘));//下面是把上传以后的图片显示出来 var html=‘<div class="thumb-list"><i class="layui-icon close-icon">ဆ</i><img src="‘+res.data.src+‘" title="‘+res.key+‘"></div>‘; $(‘.thumb-box‘).append(html); thumb.push(res.data.src); if($(‘.thumb-list‘).length == 9){ $(‘.upload-menu‘).hide(); } } ,error: function(){ layer.msg(‘上传错误!‘); } });
一开始先将确认上传按钮隐藏,防止还没得到视频时长就已经开始上传导致参数错误等问题。
另外,必须设置setTimeout定时器,因为代码的执行是并行的,防止<video>还没加载完就向它获取时长,这样得到的结果将会是NaN
标签:render 方法 span com attr htm box ons 需要
原文地址:https://www.cnblogs.com/panziwen/p/12182048.html