laravel-admin添加上传文件页面

功能描述

在laravel-admin框架中 添加一个功能
在lists的新增页面，点击按钮，进行文件上传，上传完成后，将上传的文件以表格的形式展示出来，点击行操作-删除，会将此行删除

使用的插件

bootstrap fileinput 文件上传
swal插件 (也就是sweetAlert 插件)
不需要引入文件，laravel-admin本身包含

listsController.php

protected function form()
    {
        $form = new Form(new OtherLists());
        $form->html(view('file'),'file');
        return $form;
    }

初版

file.blade.php

<input type="file" class="projectfile" id="upload" data-show-preview="false" />
<table class="table table-hover grid-table none" id="file_table">
	<thead> 
		<tr>
            <th class="column-num">序号</th>
            <th class="column-name">文件名</th>
            <th class="column-format">文件格式</th>
            <th class="column-size">文件大小/KB</th>
            <th class="column-actions">操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script type="text/javascript" src="{{ URL::asset('vendor/laravel-admin/bootstrap-fileinput/js/fileinput.min.js?v=4.5.2') }}"></script>
<script>
    let id = ''; // tbody下的tr个数
    let tr_id = ''; // 各个tr的动态id名
    function initFileInput(uploadUrl) {
        $("#upload").fileinput({
            language: 'zh', // 设置语言
            uploadUrl: uploadUrl, // 上传地址
            uploadAsync: true, // 异步
            showCancel: false, // 取消 取消按钮
            showRemove: false, // 取消 移除按钮
            showUpload: false, // 取消 上传按钮
            showCaption: false, // 不显示标题
        }).on("filebatchselected", function(event, files) {
            $(this).fileinput("upload");    // 不用点击上传按钮，自动上传
        }).on("fileuploaded", function(event, data, previewId, index) { //上传成功
            $("#file_table").removeClass('none'); // 移除none类，使表格显示出来
            id = $('tbody').children().length; // tbody下的tr个数
            tr_id = data.files[0].name + '_' + id; // 各个tr的动态id名

            let tr = ''; // 动态生成tr
            tr = '<tr id="' + tr_id + '">' +
                '<th class="column-num">' + id +
                '</th><th class="column-name">' +
                data.files[0].name.split('.')[0] + '</th><th class="column-format">' +
                data.files[0].name.split('.')[1] + '</th><th class="column-size">' +
                data.files[0].size + '</th><th class="column-actions">' +
                '<a href="javascript:void(0);" class="grid-row-delete" id="del">&nbsp;删除</a></th></tr>'; // 拼接htnl代码，反引号不能用，会出错
            $("#file_table").append(tr); // 往table里添加一列

            let clickDelCount = ''; //计算 成功执行删除操作 的次数
            $("#file_table").on("click", "#del", function(e) { // del的点击事件
                let delIndex = $(this).parent().parent().attr('id'); // 获取点击的父元素的父元素的id名(tr的id名)，点击删除找到tr的id名
                let delId = Number(delIndex.split("_")[1]) + 1; // 通过id名获取点击的第几行
                swal({ // 对话框
                    title: "确认删除?",  // 提示语
                    type: "warning",  // 提示类型
                    showCancelButton: true, // 取消按钮
                    confirmButtonColor: "#DD6B55", // 确认按钮的颜色
                    confirmButtonText: "确认", // 确认按钮的文本
                    showLoaderOnConfirm: true, // loading
                    cancelButtonText: "取消", // 取消按钮的文本
                    preConfirm: function() { // 点击确认按钮 后执行的时间
                        return new Promise(function(resolve) { // 返回promise
                            $.ajax({ //调用的ajax
                                method: 'delete',  //接口类型
                                url: '/api/file/del', // 接口地址
                                data: { // 返回的 token
                                    _token: 'Lql4qKJmanYiQa8si2jJ05S0cODjbKdQsPCQvfS2'
                                },
                                success: function(data) { // 接口成功后的事件
                                    $('#file_table').find('tr').eq(delId).addClass('none'); // 将点击的行隐藏
                                    clickDelCount++; // 每成功一次，次数+1；
                                    if (clickDelCount == $('tbody').children().length) { 
                                        $("#file_table").addClass('none'); 
                                    }// 当成功执行的次数 和 tbody下的tr节点个数相同时，table隐藏
                                    resolve(data);
                                }
                            });
                        });
                    }
                });
            });
        });
    }
    initFileInput("/api/file/upload");
</script>
<style>
    .none,.progress {
        display: none;
    }
</style>

终版

<input type="file" class="projectfile" id="upload" data-show-preview="false" />
<table class="table table-hover grid-table" id="file_table" style="display:none">
    <thead>
        <tr>
            <th class="column-num">序号</th>
            <th class="column-name">文件名</th>
            <th class="column-format">文件格式</th>
            <th class="column-size">文件大小/KB</th>
            <th class="column-actions">操作</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
<script>
    $(function() {
        let datas = [];
        function initFileInput() {
            $("#upload").fileinput({
                uploadUrl: '/api/file/upload',
                uploadAsync: true,
                showCancel: false,
                showRemove: false,
                showUpload: false,
                showCaption: false,
                msgUploadEnd:'100%' //上传结束的信息
            }).on("filebatchselected", function(e, files) {
                $(this).fileinput("upload");
            }).on("fileuploaded", function(e, data, previewId, index) {
                datas.push(data);
                let tr =
                    '<tr>' +
                    '<td>' + $('#file_table tr').length + '</td>' +
                    '<td>' + data.files[0].name.split('.')[0] + '</td>' +
                    '<td>' + data.files[0].name.split('.')[1] + '</td>' +
                    '<td>' + data.files[0].size + '</td>' +
                    '<td><a href="javascript:void(0);" data-id="' + $('#file_table tr').length + '" class="grid-row-delete">删除</a></td>' +
                    '</tr>';
                $("#file_table").append(tr);
                $("#file_table").show();
            }).on('fileuploaderror',function(e){
                swal({
                    title:'上传错误,请刷新重试',
                    type:'error',
                });
                $(e.target).fileinput('clear').fileinput('unlock');//清除上传进度条
            })
        }
        initFileInput();

        $("#file_table").on("click", "a", function(e) {
            let delId = $(this).data('id') - 1;
            swal({
                title: "确认删除?",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "确认",
                showLoaderOnConfirm: false,
                cancelButtonText: "取消",
                preConfirm: function() {
                    return new Promise(function(resolve) {
                        $.ajax({
                            method: 'delete',
                            url: '/api/file/del',
                            data: {
                                _token: 'Lql4qKJmanYiQa8si2jJ05S0cODjbKdQsPCQvfS2'
                            },
                            success: function(data) {
                                $(this).parent().parent().remove();
                                datas.splice(delId, 1);
                                if (datas == null || datas.length == 0) {
                                    $("#file_table").hide();
                                }
                                resolve(data);
                            }
                        });
                    });
                }
            });
        });
    })
</script>