Einfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau-js-Tutorial-php.cn

Einfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau

亚连

Freigeben： 2018-05-23 14:30:04

Original

1773 Leute haben es durchsucht

Jetzt zeige ich Ihnen eine einfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

1. Verwenden Sie direkt das einfachste Ajax, um Bilder asynchron hochzuladen und eine Vorschau anzuzeigen

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片上传 | cookie</title>
</head>
<body>
  file: <input type="file" id="images" name="image" /><br><br>
  desc: <input type="text" id="desc" name="desc" /><br><br>
  <input type="button" value="upload" onclick="upload();">
  
  <p class="images"></p>
  
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
<script type="text/javascript">
  function upload() {
    $.ajaxFileUpload({
      url : &#39;upload.htm&#39;,
      fileElementId : &#39;images&#39;,
      dataType : &#39;json&#39;,
      data : {desc : $("#desc").val()},
      success : function(data) {
        var html = $(".images").html();
        html += &#39;<img width="100" height="100" src="/HotelManager/upload/&#39; + data.url + &#39;">&#39;
        $(".images").html(html);
      }
    })
    return false;
  }
</script>
</body>
</html>

Nach dem Login kopieren

Servlet:

protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    DiskFileItemFactory factory = new DiskFileItemFactory();
    
    ServletFileUpload upload = new ServletFileUpload(factory);
    
    String path = request.getServletContext().getRealPath("/upload");
    String name = null;
    try {
      List<FileItem> items = upload.parseRequest(request);
      for (FileItem item : items) {
        if(item.isFormField()){
          System.out.println(item.getFieldName() + ": " + item.getString());
        } else {
          name = item.getName();
          item.write(new File(path,name));
        }
      }
      PrintWriter out = response.getWriter();
      out.print("{");
      out.print("url:\"" + name +"\"");
      out.print("}");
      
    } catch (Exception e) {
      e.printStackTrace();
    }
  }

Nach dem Login kopieren

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Zusammenfassung der Datei-Upload-Techniken basierend auf Ajax-HTML

Ein einfaches Beispiel für die Verwendung von XPath in dom4j

Eine kurze Diskussion über die DatePicker-Datumsbereichsauswahl von Bootstrap

Das obige ist der detaillierte Inhalt vonEinfache Implementierung von Ajax zum Hochladen von Bildern und deren Vorschau. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!