How to Use Ajax to load server images,

How to Use Ajax to load server images,
Request an image from the server using Ajax and display it in the browser.

Images are stored in the database at the server address and displayed in the browser, but two problems are found.

First, for security reasons, JavaScript cannot read local images. Otherwise, if you write a js file, wouldn't you be able to get files from anyone's computer.

Second, the image is stored on the server's hard disk, rather than in the customer's hard disk, so it cannot be obtained.

Later, I searched for methods on the Internet and found various methods to convert binary data into xml. I was too lazy and thought of a method myself, the BufferedImage class is used.

 

Start

My idea is to load the local image to the memory, put it in the BufferedImage buffer stream, and then use ImageIO. write (). Now everyone thinks they want to get a new idea. But if we say ajax and the data we get, it's probably a mess! It doesn't matter. I will introduce it later.

Tool

First, create a tool for loading an image and store the address of an image as a parameter to obtain the buffer stream of the image:

/*** Return the buffer stream of the Image Based on the image address * @ param addr * @ return */public static BufferedImage getInputStream (String addr) {try {String imgPath = addr; bufferedImage image = ImageIO. read (new FileInputStream (imgPath); return image;} catch (Exception e) {e. printStackTrace (); System. out. println (); System. out. println ("Image Retrieval exception: java. awt. image. bufferedImage "); System. out. println ("check whether the image path is correct or whether the address is an image");} return null ;}

Yes, it's just using ImageIO. read to load the stream object, and then the code for processing the class. This is springMVC, which is quite popular during this time, so I should use struts2 less.

 

Processing class

/*** Obtain the Image Based on the image address * @ param addr * @ param response */@ ResponseBody @ RequestMapping ("/getImg ") public void getImg (@ Param ("addr") String addr, HttpServletResponse response) {BufferedImage img = new BufferedImage (300,150, BufferedImage. TYPE_INT_RGB); img = ImgUtil. getInputStream (addr); if (img = null) {throw new RuntimeException ("Print Image exception: com. controller. business_Ctrl.getImg (String, HttpServletResponse )") ;} If (img! = Null) {try {ImageIO. write (img, "JPEG", response. getOutputStream ();} catch (IOException e) {e. printStackTrace (); System. out. println ("Print exception: com. controller. business_Ctrl.getImg (String, HttpServletResponse )");}}}

Obviously, when you use ImageIO. read () to read an image, you can use ImageIO. write () to output the image. The input stream is HttpServletResponse. getOutputStream ()

Client

            function setImg(addr){
　　　　　　　　　                $("#logo").attr("src","business/getImg?addr="+addr+"");            }

When an image needs to be loaded, the setImg method is triggered to give it an address. Of course, the address has already been transferred from the background to the foreground. Naturally, even if there is no address, change it a bit, you can also get the address in the background, return it, and set the src attribute for the img label to get the image.