java IO流读取图片供前台显示代码分享

最近项目中需要用到IO流来读取图片以提供前台页面展示,由于以前一直是用url路径的方式进行图片展示,一听说要项目要用IO流读取图片感觉好复杂一样,但任务下达下来了,做为程序员只有选择去执行喽,于是找了点资料看了会api,

嘿感觉挺简单的,由于是第一次采用IO流的方式进行读取图片供页面显示,所以把以下代码记录一下

后台代码:

java" id="highlighter_547962">

									/** 

									   * IO流读取图片 by:long 

									   * @return 

									   */

									@RequestMapping(value = "/IoReadImage/{imgName}", method = RequestMethod.GET) 

									  public String IoReadImage(@PathVariable String imgName,HttpServletRequest request,HttpServletResponse response) throws IOException {

									    ServletOutputStream out = null;

									    FileInputStream ips = null;

									    try {

									        //获取图片存放路径 

									        String imgPath = Constans.FOLDER_IMAGE + imgName;

									        ips = new FileInputStream(new File(imgPath));

									        response.setContentType("multipart/form-data");

									        out = response.getOutputStream();

									        //读取文件流 

									        int len = 0;

									        byte[] buffer = new byte[1024 * 10];

									        while ((len = ips.read(buffer)) != -1){

									            out.write(buffer,0,len);

									        }

									        out.flush();

									    }

									    catch (Exception e){

									        e.printStackTrace();

									    }

									    finally {

									        out.close();

									        ips.close();

									    }

									    return null;

									}

前台代码 - 方式一:

									<span style="white-space:pre;"> </span><div style="float: left;"> 

									     <#--${model.userDatil.photo} 为数据库存放的文件名称--> 

									     <img src="${ctx}/userInfo/IoReadImage/${model.userDatil.photo}" id="npcImg" width="125" height="148"/> 

									     <input type="hidden" id="photo" name="photo"/> 

									    </div>

js代码 - 方式二:

									var npcName = $('#npcImg').data('val'); 

									var img = document.getElementById("npcImg"); 

									img.src = '/userInfo/IoReadImage/'+npcName; 