Compartir código para leer la imagen con flujo de entrada de java y mostrarla en la interfaz de usuario

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

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

后台代码:

/** 
   * 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;
}

Código de la interfaz de usuario - Método uno:

<span style="white-space:pre;"> </span><div style="float: left;"> 
     <#--${model.userDatil.photo} es el nombre de archivo almacenado en la base de datos--> 
     <img src="${ctx}/userInfo/IoReadImage/${model.userDatil.photo}" id="npcImg" width="125" height="148"/> 
     <input type="hidden" id="photo" name="photo"/> 
    </div> 

Código de js - Método dos:

var npcName = $('#npcImg').data('val'); 
var img = document.getElementById("npcImg"); 
img.src = '"/userInfo/IoReadImage/+npcName; 

Código de jQuery - Método tres:

$('#npcImg').attr('src','/userInfo/IoReadImage/+npcName); 

Listo, tan simple, la interfaz de usuario puede mostrar la imagen, solo hay algunas líneas de código, no se proporcionan comentarios adicionales

Resumen

Aquí termina el contenido compartido sobre el código de lectura de flujo de entrada de java IO para la visualización de imágenes en la interfaz de usuario. Esperamos que sea útil para todos. Los amigos interesados pueden continuar consultando otros temas relacionados en este sitio, y son bienvenidos a dejar comentarios si encuentran algún defecto. Agradecemos el apoyo de los amigos a este sitio!

Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @ para denunciar y proporcione evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción de derechos de autor.)