bootStrap的文件上传

一。body

<input type="file" id="md5File" multiple="multiple" name="file2" />

二。JS

第一种

$('#md5File').fileinput({
   language: 'zh',
   uploadUrl: '/dataImport/upload',
   showCaption: true,//是否显示被选文件的简介
   showUpload: true,//是否显示上传按钮
   showRemove: true,//是否显示删除按钮
   showClose: true,//是否显示关闭按钮
   enctype: 'multipart/form-data',
   uploadAsync:false, //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
   layoutTemplates: {
      actionUpload: ''//就是让文件上传中的文件去除上传按钮
      //      actionDelete: '',//去除删除按钮
   },
   browseClass: 'btn btn-primary',
   maxFileCount: 2,
   minFileCount : 1
}).on('fileuploaded', function (event, data) {
   alert("异步成功")
   debugger
   //异步上传成功结果处理
}).on('fileerror', function (event, data, msg) {
   //异步上传失败结果处理
   alert("异步失败");
   debugger
   console.log(event, data, msg);
}).on('fileuploaderror', function (event, data, msg) {
   //同步上传失败结果处理
   alert("同步失败");
   debugger
   console.log(event, data, msg);
}).on('filebatchuploadsuccess', function(event,data,previewId,index) {
   //同步上传回调
   if (data.response.code == web_status.SUCCESS) {
      $.modal.alertSuccess("上传成功");
   }else if (data.response.code == web_status.FAIL){
      $.modal.alertWarning(data.response.msg)
   } else {
      $.modal.alertError("上传失败")
   }
});

第二种

function initModelz() {
   //样式初始化
   $("#indicator_fileinput1").fileinput({
      'theme': 'explorer-fas',
      'uploadUrl': ctx + 'beforehand/indicator/upload',
      enctype: 'multipart/form-data',
      //maxFileCount: 1,
      showRemove: false,
      showClear: false,
      showUpload: false,
      overwriteInitial: false,
      initialPreviewAsData: false,
      initialPreview: false,
   });
   //选着文件后事件
   $("#indicator_fileinput1").on("filebatchselected", function (event, files) {
      for (var index in files) {
         var formData = new FormData();
         formData.append('fileName', files[index].name);
         formData.append('file', files[index].file);
         formData.append('projectId', "0");
         $.ajax({
            url: ctx + 'beforehand/officeEfficiency/upload',
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function (result) {
               debugger;
               if (result.code == 500) {
                  return;
               }
               result.id = index;
               // rowFiles.push(result);
               // 文件上传
               $("#indicator_fileinput1").fileinput("upload");
            }
         });
      }
   });
}

汇总

language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showRemove: false,//显示移除按钮
showClear: false,
showPreview:true,//是否显示预览
showUpload: true, //是否显示上传按钮
showCaption: false,//是否显示标题
initialCaption: [
                    JSON.stringify(projectFileList)
                ]，
fileActionSettings:{showUpload: false}, // 控制上传按钮是否显示
browseClass: "btn btn-primary", //按钮样式
//dropZoneEnabled: false,//是否显示拖拽区域
//minImageWidth: 50, //图片的最小宽度
//minImageHeight: 50,//图片的最小高度
//maxImageWidth: 1000,//图片的最大宽度
//maxImageHeight: 1000,//图片的最大高度
//maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
//minFileCount: 0,
maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',

接收控制器

@PostMapping("/upload")
@ResponseBody
public void upload(@RequestParam("file2") MultipartFile file) throws IOException{
    System.out.println(file);
}