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


今日吐槽

让烦恼与风去远行;让痛苦陪云去流浪。哼一曲好歌,也许心情,就会轻松许多

Contact ME

TAG Link