bootstrap 插件fileinput 文件上传 前台及后台

1、在页面中引入需要的js和css样式，引入的路径根据你得具体项目路径，我的是放在fileinput目录下。

<!-- 引入bootsreap上传插件fileinput相关 -->
    <link rel="stylesheet" type="text/css" href="${ctxStatic}/fileinput/fileinput.min.css">
    <script src="${ctxStatic}/fileinput/fileinput.min.js"></script>
    <script src="${ctxStatic}/fileinput/fileinput_locale_zh.js"></script> 

2、上传文件div，注意这里的name属性与后台是对应的。

<!--bootstrap上传插件fileinput按钮-->
<div hidden  id = "filediv" class="pl_20 pr_20">
    <p class="ClassATitle control-label">选择文件 <span class="borBg"></span></p>
	<input  name = "files" id="filesupload" type = "file" class=" file-loading" multiple  />
</div>

3、初始化上传，这里的一些属性包括回调方法都可以看官方api，特别全。

//*************************上传文件js开始********************************************//
    //初始化上传控件的样式
     	$("#filesupload").fileinput({
    
    
         language: 'zh', //设置语言
         uploadUrl: "<%=basePath%>a/dd/dd", //上传的地址,访问后台接口地址
         showUpload: true, //是否显示上传按钮
         showCaption: false,//是否显示标题
         browseClass: "btn btn-primary", //按钮样式
         uploadAsync: false,//关闭异步上传，改为同步上传。
         dropZoneEnabled: false,//是否显示拖拽区域
         autoReplace : false,
         //minImageWidth: 50, //图片的最小宽度
         //minImageHeight: 50,//图片的最小高度
         //maxImageWidth: 1000,//图片的最大宽度
         //maxImageHeight: 1000,//图片的最大高度
         //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
         minFileCount: 1,
         maxFileCount: 10, //表示允许同时上传的最大文件个数
         enctype: 'multipart/form-data',
         validateInitialCount:true,
         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
         msgFilesTooMany: "选择上传的文件数量 ！",
         //向后台传递参数
         uploadExtraData:function (previewId, index) {
    
        
         	
               return {
    
    
         		"path":$("#filepath").val(),
         		"ywh":$("#ywh").val()
         		};
          }
     }); 
				
//******************上传文件js结束************//

4、后台代码

/**
 *
  * @Title: upload
  * @Description: TODO(上传附件)
  * @param request
  */
 @RequestMapping(value = "uploadfile")
 public void upload(HttpServletRequest request, HttpServletResponse response) {
    
    
  MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
  response.setContentType("text/xml;charset=UTF-8");
  PrintWriter out = null;

  //封装返回前台map
  Map<String, Object> map = new HashMap<String, Object>();
  //获取上传目录地址 ，前台传递的参数
  String path = request.getParameter("path");
  String ywh = request.getParameter("ywh");
  //文件上传到本地地址
  String localpath = "D://测试上传//"+path;
  //获取文件列表信息
  List<MultipartFile> files=multiRequest.getFiles("files");
  //循环文件获取单个文件进行上传
  for(MultipartFile file:files){
    
    
          //获取上传文件名称
          String fileName=file.getOriginalFilename();
          //获取上传文件个数
          Long fileSize=file.getSize();
          if(null!=fileName&&!"".equals(fileName)){
    
    
              try{
    
    
              	out = response.getWriter();
                  // 创建文件要保存的路径
                  File uploadFile=new File(localpath);
                  //文件路径不存在则创建
                  if(!uploadFile.exists()||null==uploadFile){
    
    
                      uploadFile.mkdirs();
                  }
                  //获取文件类型
                  String fileType=fileName.substring(fileName.lastIndexOf(".")+1,fileName.length());
                  //文件真实存放路径
                  String filePath=uploadFile.getPath()+File.separator + fileName;
                  //保存文件
                  file.transferTo(new File(filePath));
               
                  map.put("message", "success");
              }catch(Exception e){
    
    
              	map.put("meaasge", "failed");
                  e.printStackTrace();
              }
          }
      }
    out.print(JSONUtils.toJSONString(map));
 }