recherche

Maison >interface Web >js tutoriel >Implémentation simple d'Ajax pour télécharger des images et les prévisualiser

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

亚连
亚连original
2018-05-23 14:30:041799parcourir

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>

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

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé des compétences de téléchargement de fichiers basées sur Ajax HTMLArticle suivant：Résumé des compétences de téléchargement de fichiers basées sur Ajax HTML

Articles Liés

Voir plus