<div class="upload-video-box"> <div id="listVideo{$append}" class="upload_video"> {if file_exists('.'.$src)&&!empty($src)} <div class="video-item"> <video src="{$src}" controls="controls" width="260">您的浏览器不支持 video 标签。</video> </div> <hr /> {/if} </div> <div class="upload_img_btn" id="upload-video{$append}"> <i></i> <p>上传视频</p> </div> <div class="upload_img_btn" id="serverVideos{$append}" style="margin-left: 15px;"> <i></i><p>服务器视频</p> </div> <div class="upload clearfix"> <div class="layui-clear"></div> <div class="upload-image-points"> <p id="upload-video-src{$append}"></p> <input type="hidden" id="video{$append}" name="video{$append}" value="{$src??''}" class="layui-file" readonly /> </div> <div class="upload-image-points"> {if !empty($videoSize)} <div class="layui-form-mid layui-word-aux">视频最佳尺寸为: {$videoSize} 数字0表示不限制</div> {else /} <div class="layui-form-mid layui-word-aux">请上传大小合适的视频</div> {/if} </div> </div> </div> <script type="text/javascript"> var _token = $('#token').attr('content'); $(document).ready(function() { var videoInput = "#video{$append}"; var uploadUrl = "{:url('manager.upload/video')}"; layui.use(['upload', 'element'], function() { var upload = layui.upload; var element = layui.element; var uploadInst = upload.render({ elem: '#upload-video{$append}', url: uploadUrl, data:{_token:_token}, field: 'video', accept: 'video', choose: function(obj) { console.log(obj) obj.preview(function(index, file, result) { var imTpl = '<div class="video-item">' + '<video src="' + result + '" controls="controls" width="260">您的浏览器不支持 video 标签。</video>' + '</div><hr />'; $('#listVideo{$append}').html(imTpl); $(window).trigger("resize"); }); }, before: function(obj) { console.log(obj) layer.load(); }, done: function(res, index, upload) { console.log(res) layer.closeAll('loading'); if (res.code == 0) { $(videoInput).val(res.data.src); } else { $(videoInput).val(''); layer.msg(res.msg, { time: 1500 }); } }, error: function(index, upload) { layer.closeAll('loading'); } }); $('#serverVideos{$append}').click(function(){ var html = '' $.ajax('/manager/file/list',{ data:{ type:'video', page:1, size:30, _token:_token }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ if(data.code == 0){ if(data.data.length > 0){ html += '<div class="layui-card-body"><div class="serverVideoList"><ul>' $.each(data.data,function(i,item){ html += '<li><i data-src="'+item.src+'" data-box="listVideo{$append}" data-input="video{$append}" onclick="videoUrl(this)"></i><video src="'+item.src+'" controls="controls" width="260">您的浏览器不支持 video 标签。</video></li>' }) html += '</ul></div>'; if(data.data.length >= 30){ html += '<div class="serverMore"><a data-box="listVideo{$append}" data-input="video{$append}" onclick="videoList(this)">加载更多</a></div>' } html += '<div class="layui-clear"></div></div>'; layer.open({ type: 1, title: '服务器视频', shadeClose: true, area: ['800px',''], //宽高 move: false, content: html, success:function(layero, index) { alertRender() layero.find('.serverVideoList ul li i').attr('data-id',index) layero.find('.serverMore a').attr('data-id',index) } }); }else{ layer.msg(data.msg) } } }, error:function(xhr,type,errorThrown){ } }); }) }); }); function videoUrl(obj){ var imTpl = '<div class="video-item">' + '<video src="' + $(obj).attr('data-src') + '" controls="controls" width="260">您的浏览器不支持 video 标签。</video>' + '</div><hr />'; $('#'+$(obj).attr('data-box')).html(imTpl); $('#'+$(obj).attr('data-input')).val($(obj).attr('data-src')); parent.layer.close($(obj).attr('data-id')); $(window).trigger("resize"); } function videoList(obj){ var page = 2 $.ajax('/manager/file/list',{ data:{ type:'img', page:page, size:30, _token:_token }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒; success:function(data){ if(data.code == 0){ if(data.data.length > 0){ var html = '' $.each(data.data,function(i,item){ html += '<li><i data-src="'+item.src+'" data-id="'+$(obj).attr('data-id')+'" data-box="'+$(obj).attr('data-box')+'" data-input="'+$(obj).attr('data-input')+'" onclick="videoUrl(this)"></i><video src="'+item.src+'" controls="controls" width="260">您的浏览器不支持 video 标签。</video></li>' }) $(obj).parent().parent().find('.serverVideoList ul').append(html) $(window).trigger("resize"); if(data.data.length < 30){ $(obj).parent().append('<p>没有了</p>') $(obj).parent().find('a').remove(); }else{ page++; } }else{ layer.msg(data.msg) } } }, error:function(xhr,type,errorThrown){ } }); } </script>