Implémentation simple d'Ajax pour télécharger des images et les prévisualiser-js tutoriel-php.cn

Implémentation simple d'Ajax pour télécharger des images et les prévisualiser

亚连

Libérer： 2018-05-23 14:30:04

original

1780 Les gens l'ont consulté

Maintenant, je vais vous présenter une implémentation simple d'Ajax pour télécharger des images et les prévisualiser. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

1. Utilisez directement l'ajax le plus simple pour télécharger des images et prévisualiser de manière asynchrone

html :

<!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>

Copier après la connexion

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

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Résumé des techniques de téléchargement de fichiers basées sur ajax html

Un exemple simple d'utilisation de XPath dans dom4j

Une brève discussion sur la sélection de plage de dates DatePicker de Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!