<ul class="item_li ov" id="showvideos"> <li style="position: relative"> <a class="pic vcenter" style="background: #fff"> <input type="button" class="up_btn" id="video_btn" value='上传'> </a> <div class="percent_"> <div class="layui-progress" style="display: none"> <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div> </div> </div> </li> <li ><span class="upload-img-list vcenter"><video controls src="{$v}" alt="" width="200" height="150px"></video><i class="layui-icon layui-icon-close-fill" onclick="delThisImg(this)"></i><input type="hidden" name="videos[]" value="{$v}"></span></li> </ul> js 函数 var upUrl = '后台处理文件路径'; uploadFileByLayui('video_btn','',{'size':'10000'},function (data) { if (data.code === 0) { layer.msg(data.msg); } else { $('#showvideos').append('<li ><span class="upload-img-list vcenter"><video controls src="' + data.path + '" alt="" width="200" height="150px"></video><i class="layui-icon layui-icon-close-fill" onclick="delThisImg(this)"></i><input type="hidden" name="videos[]" value="' + data.path + '"></span></li>'); } }); /** * layui 文件上传 * html: * <input type="text" name="" autocomplete="off" id="upload_input" class="layui-input" placeholder="图片路径" value=""> * <button type="button" class="layui-btn" id="upload">上传图片</button> * <div class="layui-upload-list"><p id="upload_text"></p><img class="layui-upload-img" src="" id="upload_pre" height="38px"></div> * js: * uploadByLayui('upload', 'upload_pre', 'upload_input', 'upload_text', {'dir':'/admin/system'}) * @param id * @param pre * @param input * @param dtext * @param data * @param call function 回调函数 */ function uploadFileByLayui (id, tips, data, call) { if (typeof layui === "undefined"){ window.location.reload(); return false; } layui.use(['upload','element'], function() { var upload = layui.upload; var element = layui.element; if (typeof type === "undefined") { type = 'other'; } if (typeof upUrl === "undefined") { upUrl = '/index/base/upload.html'; } if(typeof data === "undefined"){ data = {}; } var ext = ''; if (data.hasOwnProperty('ext')) { ext = data.ext; } var size = 0; console.log(ext) if (data.hasOwnProperty('size')) { size = data.size; } //普通图片上传 var uploadInst = upload.render({ elem: '#' + id , field: 'litpic' , url: upUrl , accept: 'video' , acceptMime: 'video/*' , exts: ext , size: size , data: data , before: function () { $("#"+tips).html('正在上传'); } ,progress: function(n){ console.log(n); var percent = n + '%' //获取进度百分比 $('.layui-progress-bar').attr('lay-percent',percent); $('.layui-progress').show(); $('.layui-progress-bar').css({'width':percent}); element.progress('layui-progress-bar', percent); //可配合 layui 进度条元素使用 } , done: function (res) { $("#"+tips).html('上传完成').css('color', 'green'); layer.msg('上传完成'); setTimeout(function () { $('.layui-progress-bar').css({'width':'0%'}); $('.layui-progress').hide(); },2000) if (res.status === 0) { $("#" + id).html('选择文件'); layer.msg(res.msg); } else { $("#" + id).html('选择文件'); if (typeof call === "function") { call(res); } } } , error: function () { layer.msg('上传失败'); } }); }) } php 处理