Bootstrap FileInput使用

<!DOCTYPE html>
<!-- release v5.0.3, copyright 2014 - 2019 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link rel="stylesheet" href="css/fileinput.css" />
    <link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" >
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/fileinput.js"></script>
	<script type="text/javascript" src="js/zh.js"></script>
</head>
<body>
<div class="container-fluid">
    <form id="form" action="" method="post" enctype="multipart/form-data">
      <div class="row form-group">
         <div class="panel panel-primary">
           <div class="panel-heading" align="center">
             <label style="text-align: center;font-size: 18px;">文 件 上 传</label>
           </div>
         <div class="panel-body">
           <div class="col-sm-12">
              <input id="input-id" name="file" multiple type="file" data-show-caption="true">
           </div>
         </div>
        </div>
      </div>
    </form>
</div>
 <script>
 $(function () {
     initFileInput("input-id");
 })

 function initFileInput(ctrlName) {
     var control = $('#' + ctrlName);
     control.fileinput({
         language: 'zh', //设置语言
         uploadUrl: "upload/insert", //上传的地址
         allowedFileExtensions: ['jpg', 'gif', 'png','exe'],//接收的文件后缀
         //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
         uploadAsync: true, //默认异步上传
         showUpload: true, //是否显示上传按钮
         showRemove : true, //显示移除按钮
         showPreview : true, //是否显示预览
         showCaption: false,//是否显示标题
         browseClass: "btn btn-primary", //按钮样式
         //dropZoneEnabled: true,//是否显示拖拽区域
         //minImageWidth: 50, //图片的最小宽度
         //minImageHeight: 50,//图片的最小高度
         //maxImageWidth: 1000,//图片的最大宽度
         //maxImageHeight: 1000,//图片的最大高度
         //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
         //minFileCount: 0,
         //maxFileCount: 10, //表示允许同时上传的最大文件个数
         enctype: 'multipart/form-data',
         validateInitialCount:true,
         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
         msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
         layoutTemplates :{
              //actionDelete:'', //去除上传预览的缩略图中的删除图标
             //actionUpload:'',//去除上传预览缩略图中的上传图片；
             //actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
         },
     }).on('filepreupload', function(event, data, previewId, index) {     //上传中
         var form = data.form, files = data.files, extra = data.extra,
         response = data.response, reader = data.reader;
         console.log('文件正在上传');
     }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
         console.log('文件上传成功！');
     debugger
         console.log('文件上传成功！'+data.response.id);

     }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
         console.log('文件上传失败！'+data.id);


     })
 }
 </script>
</body>
</html>

controller

/**
     * 上传文件
     * @param request
     * @param response
     * @param file 上传的文件，支持多文件
     * @throws Exception
     */
    @RequestMapping("/upload/insert")
    @ResponseBody
    public Object insert(HttpServletRequest request,HttpServletResponse response
            ,@RequestParam("file") MultipartFile[] file) throws Exception{
        if(file!=null&&file.length>0){
            //组合image名称，“;隔开”
            List<String> fileName =new ArrayList<String>();
 
            try {
                for (int i = 0; i < file.length; i++) {
                    if (!file[i].isEmpty()) {
                    	fileName.add(file[i].getOriginalFilename());
                        //上传文件，随机名称，";"分号隔开
                       // fileName.add(FileUtil.uploadImage(request, "/upload/"+TimeUtils.formateString(new Date(), "yyyy-MM-dd")+"/", file[i], true));
                    }
                }
 
                //上传成功
                if(fileName!=null&&fileName.size()>0){
                    System.out.println("上传成功！");
                    System.out.println(response.toString()+fileName);;
                }else {
                    System.out.println(response.toString()+ "上传失败！文件格式错误！");
                }
            } catch (Exception e) {
                e.printStackTrace();
                System.out.println(response.toString()+ "上传出现异常！异常出现在：class.UploadController.insert()");
            }
        }else {
            System.out.println(response.toString()+ "没有检测到文件！");
        }
        JSONObject object = new JSONObject();
        object.put("id", 123);
        return object;
    }

如果点击查看按钮弹出的框被遮罩层挡住了，就需要设置css

Bootstrap FileInput使用

猜你喜欢