bootstrap fileinput上传组件的实例

至于fileinput的详细介绍，就不多说了，直接开始 

1：首先肯定是引入相应的css ,js文件

2：初始化上传组件，由于我是同时上传了多个组件，以便在后台获取相应的空间的值，将初始化方法抽取了出来，用id作为标记

                   $(function(){
         
        initFileInput("companyLicense");这是初始化组件
        initFileInput("companyLogo");
        initFileInput("personImg");
       
        fileUploaded("companyLicense");这是文件上传成功后的回调方法，通过json返回上传文件的名称以便保存到数据库
        fileUploaded("companyLogo");
        fileUploaded("personImg");
                   
                 
            }); 

 //初始化fileinput上传组件
        function initFileInput(id){
        $("#" + id).fileinput(
        {
                   showUpload : true,
                   showRemove : false,
                   uploadAsync: false,//默认为TRUE，异步上传，FALSE为同步上传
                   showPreview:true,
                   showCaption:true,
                   autoReplace:true,
                   language: "zh",//配置语言
                   uploadUrl: "${contextPath}/upload/uploadFile?id="+id,//上传路径，id用来区分每个上传控件
                   maxFileSize : 0,
                   showBrowse:true,
                   enctype: 'multipart/form-data',
                   allowedFileExtensions : ["jpg", "png","gif"],
                  // msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                     uploadExtraData: function(){
                       var files=$("#"+id).get(0).files[0]; 这是获取上传组件的内容，也是上传文件的名称传送到上传方法
                      return {"locationtype":files};
                   },//这个是外带数据`
                   dropZoneEnabled: false//是否显示拖拽区域
                }
        );
       
        }

 //文件同步上传成功，各自控件的回调函数 
      function fileUploaded(id){
     $("#"+id).on("filebatchuploadsuccess", function(event, data, previewId, index) {
        var result = data.response; //后台返回的json
           List.push(result.msg); 多个组件的情况下只能单一的上传，将返回的新的文件的路径都统一封装到一个list集合中，提交表单的时候就list传到后台获取即可操作数据库
      
      }); 
     
      }

下面是上传文件到服务器的具体Java代码

@RequestMapping(value="/uploadFile", method={RequestMethod.GET, RequestMethod.POST})
public void uploadFile(HttpServletRequest request, HttpServletResponse response) throws IOException{
String id = request.getParameter("id");
  writeLocation = PropertiesUtil.getPropertiesValue("system.file.write.location", Constants.APP_PROPERTIES_PATH);
MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) request; 
MultipartFile  mfile =  mRequest.getFile("locationtype");
fileFileName = mfile.getOriginalFilename();//获取文件名
fileSize = mfile.getSize();

try {

//request.getSession().getServletContext().getRealPath("upload/img/product");
String pathString = writeLocation;
String fileurl = "upload/";
String saveurl = "";
String filepathString = pathString + fileurl;

if(fileFileName != null){
// 构建文件对象

File folder = new File(filepathString);
// 检测文件夹是否存在，如果不存在，则新建images目录
if (!folder.exists()) {
folder.mkdir();
}
String[] str = fileFileName.split("\\.");
int index = str.length;
String suffix = str[index - 1];// fileFileName[i].split("\\.")[1];
String fileName = getImgName() + "." + suffix;
  mfile.transferTo(new File(filepathString + "\\" + fileName));
saveurl  += id+":"+fileurl + fileName + ":" + java.net.URLEncoder.encode(fileFileName,"UTF-8") + ":" + fileSize + ":" + suffix;
//outputStream.close();

Map<String, Object> map = new HashMap<String, Object>();
map.put("data", "success");
map.put("msg", saveurl);
writeJSON(response, map);
}

} catch (Exception e) {
// TODO: handle exception
writeJSON(response, "{success:false}");
e.printStackTrace();
}

}