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 {"locationtyp
4000
e":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();
}

}