< /p>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    字符串路径 = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

    <头>
        <元字符集=“utf-8”>
        
        
        <脚本类型=“text/javascript”src=“<%=basePath%>static/plugs/jquery-3.1.1.min.js”></script>
        
        
        <link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css">
        <脚本类型=“text/javascript”src=“<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js”></script>
        
        
        <link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css">
        <脚本类型=“text/javascript”src=“<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js”></script>
        <script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>
        
        <风格>
            .container{padding-top:60px}
        </风格>
    </头>
    <正文>
        <p class="容器">
            <p 类=“行”>
                <p class="col-sm-6 col-sm-offset-3">
                    <form class="form-horizo​​ntal" role="form" method="post" action="<%=basePath%>uploadFile" enctype="multipart/form-data" >
                        <p class="form-group">
                            描述
                            <p class="col-sm-10">
                                
                            </p>
                        </p>
                        <p class="form-group">
                            文件
                            <p class="col-sm-10">
                                <输入类型=“文件”名称=“myfile”data-ref=“url”类=“文件加载myfile”accept=“text/plain”多个/>
                                ;
                                
                            </p>
                        </p>
                        <p class="form-group">
                            <label class="col-sm-2 control-label">封面
                            <p class="col-sm-10">
                                <输入类型=“文件”名称=“myfile”data-ref=“url2”类=“col-sm-10 myfile”多个/>
                            </p>
                        </p>
                        提交;
                    </表格>
                </p>
            </p>
        </p>
    
        <脚本>
        
            /* var imgObj = document.getElementById("myfile");
            警报（imgObj）； */
            $(".myfile").fileinput({
                uploadUrl:"<%=basePath%>uploadFile",//上传的地址
                uploadAsync:false, //异步默认上传
                showUpload: false, // 是否显示上传按钮，紧接着文本框的那个
                showRemove : true, // 显示删除按钮，紧接着文本框的那个
                showCaption: true,//是否显示标题，就是那个文本框
                showPreview : true, // 是否显示预览，不写默认为true
                dropZoneEnabled: false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //最小文件数: 0,
                 maxFileCount: 4, //表示同时上传的最大文件个数
                 //enctype: '多部分/表单数据',
                 验证初始计数：true，
                 PreviewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                 msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                 allowedFileTypes: ['image','text'],//配置允许文件上传的类型
                 allowedPreviewTypes : [ 'image','text'],//配置所有的预览文件类型
                 allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ,'txt'],//控制被预览的所有mime类型
                 语言 : 'zh'
            })
            // 异步上传返回结果处理
            $('.myfile').on('fileerror', function(event, data, msg) {
                console.log("文件错误");
                控制台.log(数据);
            });
            // 异步上传返回结果处理
            $(".myfile").on("文件上传", 函数 (事件, 数据, PreviewId, 索引) {
                console.log("文件已上传");
                var ref=$(this).attr("data-ref");
                $("input[name='"+ref+"']").val(data.response.url);

            });

            // 同步上传错误处理
            $('.myfile').on('filebatchuploaderror', function(event, data, msg) {
                console.log("文件批量上传错误");
                控制台.log(数据);
            });
            
            // 同步上传返回结果处理
            $(".myfile").on("filebatchuploadsuccess", 函数 (事件、数据、previewId、索引) {
                console.log("文件批量上传成功");
                控制台.log(数据);
            });

            // 上传前
            $('.myfile').on('filepreupload', 函数(事件、数据、previewId、索引) {
                console.log("文件预上传");
            });        
        </脚本>
    </正文>
</html>