11月3日

今天从同学那学习到了多文件上传，我迫不及待来完善我的导入文件环节，主要是用了bootsrtap的fileinput 的js包
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="bootstrap-3.4.1-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="kartik-v-bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="kartik-v-bootstrap-fileinput/js/locales/zh.js"></script>



    <link  rel="stylesheet" href="kartik-v-bootstrap-fileinput/css/fileinput.css" media="all" type="text/css"/>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../layuimini/css/public.css" media="all">

    <meta charset="UTF-8">
    <title>导入文件</title>


</head>
<body>
<div  align="center">
    <h2>导入文件</h2>
</div>

<div class="file-loading"  >
    <input type="file" name="upfile" id="upfile" multiple>
</div>



<script type="text/javascript">


    $(function () {
        $.ajaxSetup({
            contentType: "application/x-www-form-urlencoded; charset=utf-8"
        });

        $("#upfile").fileinput({
            language: 'zh',
            dropZoneEnabled:true,//是否显示拖拽区域
            uploadUrl: 'importfilesServlet',
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove : true, //显示移除按钮
            showPreview : true, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式


        }).on("fileuploaded",function (data){
            if (data==0)
                console.log("ok");
            //RetrieveDataTables();
        });

    });
    //RetrieveDataTables();
</script>
</body>
<html>


这个就是上传界面，后台与我之前写的单文件上传基本一致。
后面的步骤是将文件存在服务器文件夹中，然后将文件信息存在数据库中展示出来，然后点击绑定的按钮来创建相关文件的表。


学习时间：17：34到23：41