1. 准备工作

1.1 前端引入相关插件

index.html
 <link href="./bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="./css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="./css/bootstrap-table.min.css">

   <link href="./font-awesome-4.7.0/css/font-awesome.css" media="all"
          rel="stylesheet" type="text/css"/>
    <link href="./themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/fileinput.min.js" type="text/javascript"></script>
    <script src="./themes/explorer-fa/theme.js" type="text/javascript"></script>
    <script src="./themes/fa/theme.js" type="text/javascript"></script>
    <script src="./bootstrap-3.3.7/js/bootstrap.js" type="text/javascript"></script>
    <script src="./js/zh.js" type="text/javascript"></script>


    <!-- Latest compiled and minified JavaScript -->
    <script src="./js/bootstrap-table.min.js"></script>

    <!-- Latest compiled and minified Locales -->
    <script src="./js/bootstrap-table-zh-CN.min.js"></script>
    <script src="./js/jquery-form.js" type="text/javascript"></script>

1.2 后端服务结构

使用bootstrap做后端的服务

目录结构

2. 文件上传插件

2.1引入文件上传插件

 <form id="add_commodity_form" method="post" enctype="multipart/form-data">

        <div class="form-group">
            <div class="file-loading">
                <input id="add_bachPic" type="file" multiple class="file-loading" data-overwrite-initial="false"
                       data-min-file-count="1">
            </div>
        </div>
    </form>
    
    $("#add_bachPic").fileinput({
        language : 'zh',
        theme: 'fa',
        uploadUrl:"dataGet/upload", // you must set a valid URL here else you will get an error
        fileType: "any",
        overwriteInitial: false,
        showPreview: true,              //展前预览
        showUpload: true,              //不显示上传按钮
        showCaption: true,             //不显示文字表述
        uploadAsync:false,                             //采用同步上传
        removeFromPreviewOnError:true,
        showBrowse: false,
        browseOnZoneClick: true,       //当文件不符合规则，就不显示预览
        maxFileCount: 5,
        maxFileSize: 1024*10                            //单位为kb，如果为0表示不限制文件大小
    }).on("filebatchuploadsuccess", function (event, data, previewId, index) {
        console.log("filebatchuploadsuccess");
        console.log(data);
        $('#table-large-columns').bootstrapTable('refresh');
    }).on('filebatchuploaderror', function(event, data, msg) {
        console.log("filebatchuploaderror");
        console.log(data);
        $('#table-large-columns').bootstrapTable('refresh'); //会对表格插件刷新处理
    });

2.2后端服务处理

@RequestMapping(value = "upload")
    @ResponseBody
    public ModelMap upload(@RequestParam("file_data") MultipartFile[] files, HttpServletRequest request) {
        ModelMap result = new ModelMap();
        // 获取路径下的文件
        File dfile = new File(filePath);
        File[] filess = null;
        List<String> fileNameList = new ArrayList<>();
        if (dfile.isDirectory()) {
            filess = dfile.listFiles();
        }
        if (filess != null ) {
            for (File file1 : filess) {
                fileNameList.add(file1.getName());
            }

        }

        for (MultipartFile file : files) {
            // 获取文件名,判断是否为空
            String fileName = file.getOriginalFilename();
            logger.info("上传的文件名为：" + fileName);
            if (file.isEmpty()) {
                result.put("error", "文件" + fileName + "为空!");
                return result;
            }
            // 判断是否已经存在
            if (fileNameList.contains(fileName)) {
                result.put("error", "文件" + fileName + "已经存在!");
                return result;
            } else {
                fileNameList.add(fileName);
            }

        }
        for (MultipartFile file : files) {
            // 获取文件名
            String fileName = file.getOriginalFilename();
            File dest = new File(filePath + "\\" + fileName);
            // 检测是否存在目录
            if (!dest.getParentFile().exists()) {
                dest.getParentFile().mkdirs();
            } else {
                try {
                    file.transferTo(dest);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }

        }
        result.put("success", "上传成功!");
        return result;
    }

3.表格插件使用

3.1 前端页面

<table id="table-large-columns",
           data-toggle="table"
           data-url="/dataGet/tableData"
           data-query-params="queryParams"
           data-pagination="true"
           data-search="true"
           data-show-refresh="true"
           data-show-toggle="true"
           data-show-columns="true"
           data-toolbar="#toolbar">
        <thead>
        <tr>
            <th data-field="name">文件名</th>
            <th data-field="size">大小</th>
            <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
        </tr>
        </thead>
    </table>
    
    
     function queryParams() {
        return {
            per_page: 10000,
            page: 1
        };
    }

    //操作栏的格式化
    function actionFormatter(name, row, index) {
        var id = row.name;
        var result = "";
        console.log("id:" + id + ",row" + row.name + "index:" + index);
        result += "<a href='javascript:;' class='btn btn-primary btn-sm' onclick=\"downloadById('" + id + "')\" title='下载'>下载</a>";
        result += "<a href='javascript:;' class='btn btn-warning btn-sm' onclick=\"deleteById('" + id + "')\" title='删除'>删除</a>";
        return result;
    }

    function downloadById(id) {
        var $eleForm = $("<form method='get'></form>");

        $eleForm.attr("action","dataGet/download/"+id);

        $(document.body).append($eleForm);

        //提交表单，实现下载
        $eleForm.submit();
    }

    function deleteById(id) {
        jQuery.ajax({
            url: "dataGet/delete",
            type: "GET",
            data: {id: id},
            dataType: "json",
            success: function (data, status) {
                console.log("data" + data);
                console.log("status" + status);
                if (data == "success") {
                    $('#table-large-columns').bootstrapTable('refresh');
                    alert("delete success!");
                } else {
                    $('#table-large-columns').bootstrapTable('refresh');
                    alert("delete fail!");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("error");
                console.log(XMLHttpRequest.status);
                console.log(XMLHttpRequest.readyState);
                console.log(textStatus);
            }

        })
    }

3.2 后端处理

    @RequestMapping(value = "tableData")
    @ResponseBody
    public JSON GetData(int per_page, int page) {
        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        //获取文件夹下文件的数目
        File file = new File(filePath);
        File[] files = null;
        if (file.isDirectory()) {
            files = file.listFiles();
        }
        int total = 0;
        if (files != null) {
            total = files.length;
        }
        JSONArray jsonArray = new JSONArray();
        List<TableData> list = new ArrayList<>();
        if(files!=null&&files.length>0) {
            for (File f : files) {
                TableData tableData = new TableData();
                String name = f.getName();
                String size = dataGetService.formetFileSize(f.length());
                tableData.setName(name);
                tableData.setSize(size);
                list.add(tableData);
            }
        }
        int end = page * per_page;
        if (total < (end)) {
            end = total;
        }
        jsonArray = JSONArray.parseArray(JSON.toJSONString(list.subList((page - 1) * per_page, end)));
        return jsonArray;
    }