<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 处理
