Ajax method to clear browser js, css, image cache_javascript skills

When making stuff, I always store the address of the image on the server in the database, and then display it in the browser, but later I discovered two problems.

First: For security reasons, js cannot read local images. Otherwise, if you write a js, you can get the files in anyone's computer.

Second: The image is stored on the server’s hard drive, not on the client’s hard drive, so it cannot be retrieved

Later, I searched for methods on the Internet, and the methods I found were all kinds of high-level answers for converting binary to xml. Then I was too lazy, so I thought of one myself

The

method is to use the BufferedImage class.

Start

First of all, let me talk about my idea, which is to load the local image into the memory, then put it into the buffer stream of BufferedImage, and then use ImageIO.write(), Now everyone probably wants to get an idea, but if we talk about ajax, the data obtained is probably still a mess! It’s okay, I’ll introduce that later.

Tools

First create a tool for loading images, store the address of an image as a parameter, and get the buffer stream of this image:

/**
   * 根据图片的地址，返回图片的缓冲流
   * @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("获取图片异常:java.awt.image.BufferedImage");
      System.out.println("请检查图片路径是否正确，或者该地址是否为一个图片");
    }
    return null;
  }

Yes, just use ImageIO.read to load the stream object, and then the code for processing the class. This is what I use springMVC, springMVCDuring this time

It is quite popular, so I use struts2 less

Processing class

/**
   * 根据图片的地址，来获取图片
   * @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("打印图片异常：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("打印异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
      }
    }
  }

Obviously, when using ImageIO.read() to read the image, use ImageIO.write(), to output the image, and the input stream is

HttpServletResponse.getOutputStream()

Client

Copy code The code is as follows:

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

As shown in the figure, when you need to load an image, trigger the setImg method and give it an address. Of course, the address has already been passed from the background to the front. Naturally, even if there is no address, it can be changed slightly. Get the address in the background, then return, and then set the src attribute to the img tag to get the image.

The following introduces how to use Ajax to clear the browser's js, css, and image cache in jquery 1.2 version.

jquery has had ifModified and cache parameters since version 1.2, so you don’t need to add header

yourself.

ifModified Boolean Default: false 
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. 
cache Boolean Default: true 
Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser. 
$.ajax({
type: "GET",
url: "static/cache.js",
dataType: "text",
cache:false,
ifModified :true
});