bootstrap多图片上传实现

前端代码

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

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


}