bootstrap多图片上传实现

1. <div class="file-loading">  
2.                <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2">  
3.            </div>  

[html]  view plain  copy

1. <script>  
2. $("#file-1").fileinput({  
3.     theme: 'fa',  
4.     uploadUrl: 'uploader/uploader.do', // you must set a valid URL here else you will get an error  
5.     allowedFileExtensions: ['jpg', 'png', 'gif'],  
6.     overwriteInitial: false,  
7.     maxFileSize: 1000,  
8.     maxFilesNum: 10,  
9.     enctype: 'multipart/form-data',  
10.     //allowedFileTypes: ['image', 'video', 'flash'],  
11.     slugCallback: function (filename) {  
12.         return filename.replace('(', '_').replace(']', '_');  
13.     }  
14. });  

1. </script>  

需要引入fileinput.js

后端代码

@SuppressWarnings("resource")
@RequestMapping(value = "/uploader.do")
public Map<String, Object> upload(HttpServletRequest request, HttpServletResponse response) throws IOException{
response.setCharacterEncoding("UTF-8");
Map<String, Object> json = new HashMap<String, Object>();
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        
        /** 页面控件的文件流* */
        MultipartFile multipartFile = null;
        Map map =multipartRequest.getFileMap();
         for (Iterator i = map.keySet().iterator(); i.hasNext();) {
                Object obj = i.next();
                multipartFile=(MultipartFile) map.get(obj);


               }
        /** 获取文件的后缀* */
        String filename = multipartFile.getOriginalFilename();


        InputStream inputStream;
        String basePath=servletContext.getRealPath("/").substring(0, servletContext.getRealPath("/").lastIndexOf("bspheis-wechat"))+"/upload/";
        String outPath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort();
        String newVersionName = "";
        String fileMd5 = "";
        byte[] data = new byte[1024];
        int len = 0;
        FileOutputStream fileOutputStream = null;
        
        try {


            inputStream = multipartFile.getInputStream();
            fileOutputStream = new FileOutputStream(basePath+filename);
            while ((len = inputStream.read(data)) != -1) {
            fileOutputStream.write(data, 0, len);
            }
           
        } catch (Exception e) {
            e.printStackTrace();
        }
             json.put("newVersionName", filename);
        json.put("fileMd5", fileMd5);
        json.put("message", "图片上传成功");
        json.put("status", true);
        return json;


}