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); } }
读取图片显示 还是用上面的方法即可! 至此,多张图片上传完成! 小白一枚,仅供参考,不喜勿喷!谢谢!