English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Java I/O stream code to read images for front-end display sharing

Recently, in the project, we need to use IO stream to read images for front-end page display. Since we have always used URL paths for image display, when we heard that the project needs to use IO stream to read images, it felt very complex. But the task has been assigned, and as a programmer, we only have to choose to execute it. So, I found some materials and looked at the api for a while,

Hey, it feels quite simple, as this is the first time using IO stream to read an image for page display, so let's record the following code

Backend code:

/** 
   * IO stream reading image 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 {
		//Get the image storage path 
		String imgPath = Constants.FOLDER_IMAGE + imgName;
		ips = new FileInputStream(new File(imgPath));
		response.setContentType("multipart/form-data");
		out = response.getOutputStream();
		//Read file stream 
		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;
}

Front-end code - Method 1:

<span style="white-space:pre;"> </<span><div style="float: left;"> 
     <#--${model.userDatil.photo} is the file name stored in the database--> 
     <img src="${ctx}/userInfo/IoReadImage/${model.userDatil.photo}" id="npcImg" width="125" height="148/> 
     <input type="hidden" id="photo" name="photo"/> 
    </div> 

js code - Method 2:

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

jQuery code - Method 3:

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

That's it, the image can be displayed on the front-end, only a few lines of code, no additional comments are explained

Summary

That's all the content of this article about sharing the code for java IO stream reading images for front-end display. I hope it will be helpful to everyone. Those who are interested can continue to read other related topics on this site, and welcome comments on any shortcomings. Thank you for the support of friends to this site!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liabilities. If you find any suspected copyright content, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

You May Also Like