Ajax-Methode zum Löschen der Browser-JS-, CSS- und Bild-Cache_Javascript-Kenntnisse

Beim Erstellen speichere ich immer die Adresse des Bildes auf dem Server in der Datenbank und zeige sie dann im Browser an, aber später entdeckte ich zwei Probleme.

Erstens: Aus Sicherheitsgründen kann js keine lokalen Bilder lesen. Andernfalls können Sie die Dateien auf jedem Computer abrufen, wenn Sie einen js schreiben.

Zweitens: Das Bild wird auf der Festplatte des Servers gespeichert, nicht auf der Festplatte des Clients, sodass es nicht abgerufen werden kann

Später habe ich im Internet nach Methoden gesucht und die Methoden, die ich gefunden habe, waren alle möglichen allgemeinen Antworten zum Konvertieren von Binärdateien in XML. Dann war ich zu faul, also habe ich mir selbst eine ausgedacht

-Methode besteht darin, die Klasse BufferedImage zu verwenden.

Starten

Lassen Sie mich zunächst über meine Idee sprechen, die darin besteht, das lokale Bild in den Speicher zu laden, es dann in den Pufferstrom von BufferedImage einzufügen und dann ImageIO.write zu verwenden (), Jetzt möchte sich wahrscheinlich jeder ein Bild machen, aber wenn wir über Ajax sprechen, sind die erhaltenen Daten wahrscheinlich immer noch ein Chaos! Es ist in Ordnung, ich werde das später vorstellen.

Werkzeuge

Erstellen Sie zunächst ein Tool zum Laden von Bildern, speichern Sie die Adresse eines Bildes als Parameter und rufen Sie den Pufferstrom dieses Bildes ab:

/**
   * 根据图片的地址，返回图片的缓冲流
   * @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;
  }

Ja, verwenden Sie einfach ImageIO.read, um das Stream-Objekt zu laden, und dann den Code für die Verarbeitung der Klasse. Das verwende ich springMVC, springMVCWährend dieser Zeit

Es ist sehr beliebt, daher verwende ich weniger Struts2

Verarbeitungsklasse

/**
   * 根据图片的地址，来获取图片
   * @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)");
      }
    }
  }

Wenn Sie ImageIO.read() zum Lesen des Bildes verwenden, verwenden Sie natürlich ImageIO.write(), , um das Bild auszugeben, und der Eingabestream ist

HttpServletResponse.getOutputStream()

Kunde

Wenn Sie ein Bild laden müssen, lösen Sie die setImg-Methode aus und geben Sie ihr eine Adresse. Natürlich wurde die Adresse bereits vom Hintergrund an den Vordergrund übergeben, auch wenn keine vorhanden ist Adresse, Sie können die Adresse im Hintergrund leicht ändern, dann zurückkehren und dann das src-Attribut auf das img-Tag setzen, um das Bild abzurufen.

Im Folgenden wird erläutert, wie Sie mit Ajax den JS-, CSS- und Bildcache des Browsers in der JQuery-Version 1.2 löschen.

jquery verfügt seit Version 1.2 über ifModified- und Cache-Parameter, sodass Sie keinen Header

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
});