SSM中 图片上传和本页面显示

1.jsp编写

<img id="img" src="" style="height: 50px; width:50px"><!-- 显示图片的 --> <input name="fileImage" type="file" onchange="uploadImage();"> <input type="hidden" name="path" id="pic" > <!--head中编写> <script type="text/javascript" src="/js/jquery-1.8.3.js"></script> <!-- jQuery.form.js是一个form插件,支持ajax表单提交和ajax文件上传 --> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript"> function uploadImage() { alert("cacaca"); //编写ajax var obj={ url:"imageupload.htm", dataType:"json", type:"post", success:function(data){ $("img").show(); $("#img").attr("src",data.imagePath); $("#pic").val(data.imagePath); } }; //提交form $("#imm").ajaxSubmit(obj); } </script>

2.cn.vp.controller包类中

private ServletContext servletContext; @Override public void setServletContext(javax.servlet.ServletContext servletContext) { this.servletContext=servletContext; } @RequestMapping("/imageupload.htm") @ResponseBody public String imageUpload(@RequestParam("fileImage") CommonsMultipartFile fileImage) { System.err.println("进入方法"); // 获取上传图片的位置 String path = servletContext.getRealPath("/upload/"); System.out.println("上传的路径为:" + path); // 获取文件名称 String name = fileImage.getOriginalFilename(); // 创建file对象 写入 File file = new File(path, name); try { fileImage.getFileItem().write(file); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } // 将上传的图片路径以json的方式返回客户端 String imagePath = "upload/" + name; JSONObject jsonObject = new JSONObject(); jsonObject.put("imagePath", imagePath); // 将对象转为json格式 String json = jsonObject.toJSONString(); System.out.println("json:"+json); return json; }

3.springmvc-servlet.xml中添加

<!-- 静态资源处理器 --> <mvc:resources location="/upload/" mapping="/upload/**" /> <mvc:resources location="/js/" mapping="/js/**" />