上传单张、多张图片demo示例

1、上传单张图片

jsp页面部分代码：

                        <div class="form-group">
                            <label class="control-label col-md-3">上传图片</label>
                            <div class="col-md-9">
                                <input type="file" required name="images" accept="image/*" class="hidden" id="imageFile"/>
                                <input type="hidden" required name="image" id="imageUrl" class="hidden" />
                                <a href="javascript:void(0);" οnclick="$('#imageFile').click();"><img id="uplImage" src="/images/report/upload.jpg" class="img-thumbnail img-style"></a>
                            </div>
                        </div>
                    </div>

required name：后台controller接收传递参数  

<a>标签里面的
<img id="uplImage" src="/images/report/upload.jpg" class="img-thumbnail img-style"> 是为了在页面上显示默认图片的。
部分js代码：
$(function () {
        /!* 上传图片*!/
        $("#imageFile").fileupload({
            url: "/report/image",
            dataType: 'json',
            formData: null,
            add: function (e, data) {
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                var url=result.data;
                if (result.success == false) {
                    alert("上传失败");
                } else {
                    console.info(url)
                    $("#uplImage").attr("src","/sysImage/showImg?src="+url);
                   $("#imageUrl").val(url);
                }
            },
            progressall: function (e, data) {
            }
        });
    });
controller部分代码：

    @RequestMapping(value = "/image")
    @ResponseBody
    public Tip houseImages( @RequestParam(name = "images") MultipartFile file, HttpServletRequest request){
        try {
            String filename = file.getOriginalFilename();
            String name = UUIDFactory.getStringId() + "_" + System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));
            String url = "/images/" + name;
            String realPath = request.getSession().getServletContext().getRealPath(url);
            File img = new File(realPath);
            if (!img.exists() && !img.isDirectory()) {
                img.mkdirs();
            }
            file.transferTo(img);
            return new Tip(url);//返回的时候携带一个url路径

        } catch (Exception e) {
            e.printStackTrace();
            return new Tip(2);
        }
    }
下面这个输出文件流，可以放到一个类中 以供调用

/**
     * 输出文件流，输出本地绝对路径图片
     * @param response
     * @param request
     * @param src 绝对路径 例如 d:/elangzhi/tempImg/head.jpg
     * @throws IOException
     */
    @RequestMapping("/showTempImg")
    public void showTempImg(HttpServletResponse response, HttpServletRequest request,@RequestParam String src) throws IOException {

        if(!"".equals(src)){
            File file  = new File(src);
            //如果文件存在
            if(file.exists()){
                InputStream in = new FileInputStream(file);
                outputStream(response,in);
            }
        }
    }


    /**
     * 输出图片文件流，选择项目路径内部文件
     * @param response
     * @param request
     * @param src 项目根路径，例如：/images/headimg/head.jpg
     * @throws IOException
     */
    @RequestMapping("/showImg")
    public void showImg(HttpServletResponse response, HttpServletRequest request,@RequestParam String src) throws IOException {

        if(!"".equals(src)){
            String realPath = request.getServletContext().getRealPath(src);
            File file  = new File(realPath);
            if(file.exists()){
                InputStream in = new FileInputStream(file);
                outputStream(response,in);
            }
        }
    }

    /**
     * 输出文件流
     * @param response
     * @param in
     * @throws IOException
     */
    public void outputStream(HttpServletResponse response,InputStream in) throws IOException {
        response.setContentType("image/jpeg");
        OutputStream os = response.getOutputStream();
        byte[] b = new byte[1024];
        while( in.read(b)!= -1){
            os.write(b);
        }
        in.close();
        os.flush();
        os.close();
    }


至此，单张图片上传并显示完成！



2、上传多张图片
jsp页面部分代码：
                    <div class="col-md-12" >
                         <div class="col-md-2">
                            <input type="file" required name="house"  class="hidden" multiple id="houseFile"/>
                            <button  class="btn btn-success uploaded-btn" type="button"  οnclick="$('#houseFile').click();" >
                                <span class="glyphicon glyphicon-home"></span><br>房产证
                            </button>
                         </div>
                         <div class="col-md-10" id="houseImages" ></div>
                    </div>
页面截图：





js部分代码：
 /!* 上传房产证照片*!/
        $("#houseFile").fileupload({
            url: "/userRoom/houseImages",
            dataType: 'json',
            formData: {"userRoomId":$("#id").val()},
            add: function (e, data) {
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                var image = result.data;
                var imgUrl = image.url;
                var  imgId=image.id;
                console.info("图片的编号"+imgId);
                if (result.success == false) {
                    alert("上传失败");
                } else {
                    var div = $("<div class='show-fc' id='divHouse"+imgId+"'>");
                    var img = $("<img  src='/sysImage/showImg?src="+imgUrl+"'class='thumbnail uploaded-image' />");
                    var imgx = $("<img class='del-image' id="+imgId+"  οnclick='deleteImage(this.id)' src='/images/deleteLog/deleteImg.png' >");
                    div.append(img).append(imgx);
                    $("#houseImages").append(div);
                }
            },
            progressall: function (e, data) {
            }
        });

需要注意的是： 上传完成图片以后 利用js 对div 进行追加操作
controller部分代码：



 @RequestMapping(value = "/houseImages")
    @ResponseBody
    public Tip houseImages(@RequestParam String userRoomId,@RequestParam(name = "house") MultipartFile file,HttpServletRequest request){
        try {
            String filename = file.getOriginalFilename();
            String name = UUIDFactory.getStringId() + "_" + System.currentTimeMillis() + filename.substring(filename.lastIndexOf("."));
            String url = "/images/userRoom/" + name;
            String realPath = request.getSession().getServletContext().getRealPath(url);
            File img = new File(realPath);
            if (!img.exists() && !img.isDirectory()) {
                img.mkdirs();
            }
            file.transferTo(img);
            Image image=new Image();
            image.setId(UUIDFactory.getStringId());
            image.setCreateTime(new Date());
            image.setType("2");
            image.setStatus("0");
            image.setUrl(url);
            image.setInfoId(userRoomId);
            image.setIntro("房产证照片");
            userRoomService.insertImg(image);
            return new Tip(image);

        } catch (Exception e) {
            e.printStackTrace();
            return new Tip(2);
        }
    }

读取图片显示 还是用上面的方法即可！
至此，多张图片上传完成！ 
小白一枚，仅供参考，不喜勿喷！谢谢！