index.blade.php

@section("title", "导航菜单")

@extends("admin::layouts.admin")

@section("breadcrumb")
    <div class="admin-breadcrumb">
         <span class="layui-breadcrumb">
            <a href="{{ route("permission-group.index") }}">导航菜单</a>
        </span>
    </div>
@endsection
@section("content")
    {{--<div class="layui-form-item">
        <label class="layui-form-label">视频</label>
        <div class="layui-input-block">
            <input type="text" name="vi_url" id="vi_url">
            <div class="layui-upload">
                <a class="layui-btn" id="btn-video">上传视频</a>&nbsp;<span class="x-red" id="ups"></span></div>
            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar"><div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div></div>
        </div>
    </div>--}}
    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="testList">选择文件</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr><th>文件名</th>
                    <th>大小</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" class="layui-btn site-demo-active"  data-type="loading" id="testListAction">开始上传</button>
    </div>

@endsection

@section("script")

    <script>

        layui.use(['form', 'layedit', 'laydate','element', 'upload','table'], function(){
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer,
                laydate = layui.laydate,
                upload = layui.upload

                ,element = layui.element;
            var xhrOnProgress=function(fun) {
                xhrOnProgress.onprogress = fun; //绑定监听
                //使用闭包实现监听绑
                return function() {
                    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
                    var xhr = $.ajaxSettings.xhr();
                    //判断监听函数是否为函数
                    if (typeof xhrOnProgress.onprogress !== 'function')
                        return xhr;
                    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
                    if (xhrOnProgress.onprogress && xhr.upload) {
                        xhr.upload.onprogress = xhrOnProgress.onprogress;
                    }
                    return xhr;
                }
            }
            var demoListView = $('#demoList')
                ,uploadListIns = upload.render({
                elem: '#testList'
                ,url: './audio'
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,xhr:xhrOnProgress
                ,progress:function(value){//上传进度回调 value进度值
                    element.progress('demo', value+'%');//设置页面进度条
                }
                ,choose: function(obj){
                    _files=[];
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var fileseli = ((file.size/1014).toFixed(1));
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+(file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td>   <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">\n' +
                            '        <div class="layui-progress-bar layui-bg-red" lay-percent="(file.size/1014).toFixed(1)%"></div>\n' +
                            '    </div>' +
                            '' +
                            '</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));
                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });
                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });
                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    console.log(res);
                    if(res.status == 1){ //上传成功
                        console.log(res);
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();

                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                        tds.eq(3).html(''); //清空操作
                        _files.push(res.file);
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        });
    </script>
@endsection