Heim > Artikel > Web-Frontend > Ajax-Upload und Vorschau von Bildern (mit Code)

Ajax-Upload und Vorschau von Bildern (mit Code)

php中世界最好的语言Original: 2018-04-03 15:11:392196Durchsuche

Dieses Mal bringe ich Ihnen Ajax-Upload- und Vorschaubilder (mit Code). Was sind die Vorsichtsmaßnahmen für Ajax-Upload- und Vorschaubilder?

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

<!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 : 'upload.htm',
      fileElementId : 'images',
      dataType : 'json',
      data : {desc : $("#desc").val()},
      success : function(data) {
        var html = $(".images").html();
        html += '<img width="100" height="100" src="/HotelManager/upload/&#39; + data.url + &#39;">'
        $(".images").html(html);
      }
    })
    return false;
  }
</script>
</body>
</html>

Servlet：

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

Wie sendet Ajax ein Formular und implementiert den Datei-Upload?

Wie wäre es mit den von hochgeladenen JSON-Daten? Ajax-Hintergrunderfolgsverarbeitung

Das obige ist der detaillierte Inhalt vonAjax-Upload und Vorschau von Bildern (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So können Sie mit Ajax eine Vorschau von Bildern anzeigen, diese hochladen und Miniaturansichten anzeigenNächster Artikel：So können Sie mit Ajax eine Vorschau von Bildern anzeigen, diese hochladen und Miniaturansichten anzeigen

In Verbindung stehende Artikel

Mehr sehen