图片上传
在JSP页面的body标签中
<img width="50dp" height="50dp" id="img" src=""> <!-- 显示图片的 --> <input name="fileImage" type="file" onchange="uploadImage();"> <input type="hidden" name="path" id="pic" >
在JSP有图片上传的表单中加入如下
利用ajax与json
<script type="text/javascript" src="/js/jquery-1.8.3.js"></script> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript"> function uploadImage() { //编写ajax var obj={ url:"imageupload.htm", dataType:"json", type:"post", success:function(data){ $("#img").show(); $("#img").attr("src",data.imagePath); $("#pic").attr("value",data.imagePath); }, error:function () { alert("失败"); } }; //提交form $("#imm").ajaxSubmit(obj);--------imm是body的id } </script>
在控制层(controller)实现方法
/**图片上传 * @RequestParam("fileImage") fileImage要与页面中 name一致 * @param fileImage * @return */ @RequestMapping("imageupload.htm") @ResponseBody public String imageUpload(@RequestParam("fileImage") CommonsMultipartFile fileImage) { // 获取上传图片的位置 String path = servletContext.getRealPath("/upload/"); System.err.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.err.println("json:"+json); return json; }
同时实现的类要实现一个接口
@Controller public class BookInfoController implements ServletContextAware { @Autowired private BookInfoService bookInfoService; private ServletContext servletContext; @Override public void setServletContext(ServletContext servletContext) { this.servletContext = servletContext; }
同时要在项目下创建upload目录
在springmvc中配置添加如下
<mvc:resources location="/upload/" mapping="/upload/**" /> <!-- 文件上传 --> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" > <property name="defaultEncoding" value="utf-8"/> <!-- 默认编码 (ISO-8859-1) --> <property name="maxInMemorySize" value="10240"/> <!-- 最大内存大小 (10240)--> <property name="uploadTempDir" value="/upload/"/> <!-- 上传后的目录名 (WebUtils#TEMP_DIR_CONTEXT_ATTRIBUTE) --> <property name="maxUploadSize" value="-1"/> <!-- 最大文件大小,-1为无限止(-1) --> </bean>
即可实现图片的上传,,效果图如下:
点击选择文件出现目录 进行选择在点击打开按钮即可
之后出现如下效果: