首选图片的上传和下载并不是很难，但要注意细节。
一，给出前端图片上传的html代码
1.图片上传的控件
<img src="/${res}/images/default.png" alt="" class="backimg"> ?????<form ?method="post" id="imgform" enctype="multipart/form-data" action="dy_upload_image.jspx"> ?????????<a href="javascript:;" class="imgstyle">请选择文件 ???????????<input type="file" name="uploadImage" id="uploadImage"> ?????????</a> ?????????<input type="button" onclick="gosubmit()" id="imgbtn" value="上传" /> ?????</form>上传图片要注意给出默认图片，提交按钮是btton、并不是submit ，属性是 enctype="multipart/form-data" 这样后台才能接收到上传的文件。
2.图片上传的js
（1）首次加载的js
$.ajax({ ???????????url:‘dy_firstget_image.jspx‘, ???????????type:‘get‘, ???????????????????????data:{recid:str}, ???????????success:function(info){ ???????????????$(‘.backimg‘).attr(‘src‘,JSON.parse(info).msg) ???????????????console.log(info) ???????????}, ???????????error:function(err,errmsg){ ???????????????console.log(errmsg) ???????????} ???????})（2）点击上传时的js
function gosubmit(){ ???????????var formdata=new FormData(); ???????????//formdata.append(‘name‘, ‘uploadImage‘); ???????????formdata.append(‘uploadImage‘,$(‘#uploadImage‘).get(0).files[0]); ???????????formdata.append(‘recid‘,str); ???????????$.ajax({ ???????????????url:‘dy_upload_image.jspx‘, ???????????????type:‘post‘, ???????????????contentType:false, ???????????????data:formdata, ???????????????processData:false, ???????????????success:function(info){ ???????????????????????console.log(info) ???????????????????$(‘.backimg‘).attr(‘src‘,JSON.parse(info).msg); ???????????????}, ???????????????error:function(err){ ???????????????????console.log(err) ???????????????} ???????????}); ???????} ???这里用到了formdata ，我理解的是用ajax 提交的方式将表单提交上去，因为form表单正常submit提交会跳到下一个界面。用ajax提交可以在本页面预览图片，用户体验很好。
把图片数据放到fordata中注意上面红色js的代码，是后面controller接到数据的关键。
先把图片挂上去，昨天的成果（笑脸）
3，后台接收图片的controller（首次加载图片，如果没有图片则显示默认图片）
/** ????* 首次加载预览图片 ????* @param request ????* @param response ????* @param imageName ????*/ ???@RequestMapping(value = "/dy_firstget_image.jspx", method = RequestMethod.GET) ???public void dy_firstget_image(HttpServletRequest request, HttpServletResponse response, ???????????@RequestParam(value = "recid", required = false) String recid) { ???????response.setContentType("image/jpeg"); ???????if(!StringUtils.isEmpty(recid)){ ???????????BaseInfoManageBean baseBean = cmsDyUploadImageDaoImpl.getDXYQSBImageByid(recid); ???????????//根据id查询该仪器的图片，如果不为空则返回图片url ???????????if(!StringUtils.isEmpty(baseBean.getPhoto())){ ???????????????ResponseUtils.renderText(response, DyUtils.getJSONString(0, baseBean.getPhoto())); ???????????} ???????} ???}4，上传图片方法
???/** ????* 上传图片、并且把照片url存储到大型仪器表中 ????* @param request ????* @param response ????* @param file ????* @param recid ????*/ ???@RequestMapping(value = "/dy_upload_image.jspx", method = RequestMethod.POST) ???public void dy_upload_image(HttpServletRequest request, HttpServletResponse response, ???????????@RequestParam(value = "uploadImage", required = false) MultipartFile file, ???????????@RequestParam(value = "recid", required = false) String recid) { ???????if(file!=null){ ???????????String imageUrl = cmsDyUploadImageDaoImpl.saveImage(file, recid); ???????????if(imageUrl!=null){ ???????????????ResponseUtils.renderText(response, DyUtils.getJSONString(0, imageUrl)); ???????????????return; ???????????} ???????} ???????ResponseUtils.renderText(response, DyUtils.getJSONString(1, "图片上传失败")); ???}上传成功后返回imageUrl 赋值到img控件上面
<img src="http://127.0.0.1:8080/bjnxy/dy_get_image.jspx?imageName=537e902607944b04a45a3d62d0bd28a3.jpg" ?class="backimg">
5，预览图片方法
/** ????* 预览图片 ????* @param request ????* @param response ????* @param imageName ????*/ ???@RequestMapping(value = "/dy_get_image.jspx", method = RequestMethod.GET) ???public void dy_get_image(HttpServletRequest request, HttpServletResponse response, ???????????@RequestParam(value = "imageName", required = false) String imageName) { ???????response.setContentType("image/jpeg"); ???????try { ???????????StreamUtils.copy(new FileInputStream(new File(DyUtils.IMAGE_DIR+imageName)), response.getOutputStream()); ???????} ?catch (IOException e) { ???????????e.printStackTrace(); ???????????ResponseUtils.renderText(response, DyUtils.getJSONString(1, "读取图片失败")); ???????} ???}用Ajax图片上传、预览、修改图片
原文地址：http://www.cnblogs.com/ScarecrowAnBird/p/7894776.html