Ajax-Upload und Vorschau von Bildern (mit Code)-js-Tutorial-php.cn

Ajax-Upload und Vorschau von Bildern (mit Code)

php中世界最好的语言

Freigeben： 2018-04-03 15:11:39

Original

2194 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!