html
<div class="layui-form-item">
<label class="layui-form-label">上传视频</label>
<button type="button" class="layui-btn cover" id="control_video_button">上传视频</button>
<button type="button" class="layui-btn layui-btn-danger cover" id="control_video_del" style="display: {$detail.control_video ? 'inline' : 'none'}">删除视频</button>
<input type="hidden" id="control_video" value="{$detail.control_video}" name="control_video"/>
<input type="hidden" id="temp_url_id" value="" name="temp_url_id"/>
</div>
<div class="layui-form-item">
<label class="layui-form-label"></label>
<div class="layui-input-block">
<video src="{$detail.control_video}" controls="controls" id="control_video_demo" style="width: 50%;display: {$detail.control_video ? 'block' : 'none'}">
您的浏览器不支持 video 标签。
</video>
<p id="demoText"></p>
</div>
</div>
js
layui.use(['upload','form'], function(){
var form = layui.form
,$ = layui.jquery
,upload = layui.upload;
var uploadInst = upload.render({
elem: '#control_video_button', //绑定元素
url: "{:url('Upload/upload')}",//上传接口
accept: 'video'
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#control_video_demo').attr('src', result); //图片链接(base64)
$('#control_video_demo').css('display','block');
$('#control_video_del').css('display','inline');
});
},
done: function(res){
console.log(res);
//如果上传失败
if(res.code != 1){
return layer.msg('上传失败');
}
//上传成功
document.getElementById("control_video").value = res.filename;
document.getElementById("temp_url_id").value = res.msg;
},error: function(res){
console.log(res);
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
$('#control_video_del').click(function(){
$('#control_video_demo').css('display','none');
$('#control_video_del').css('display','none');
$('#control_video').val('');
})
});
效果