Téléchargement Ajax et aperçu des images (avec code)-js tutoriel-php.cn

Téléchargement Ajax et aperçu des images (avec code)

php中世界最好的语言

Libérer： 2018-04-03 15:11:39

original

2268 Les gens l'ont consulté

Cette fois, je vais vous présenter les images de téléchargement et d'aperçu Ajax (avec code). Quelles sont les précautions pour le téléchargement et l'aperçu des images Ajax Voici un cas pratique, jetons un coup d'œil.

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

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 : '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>

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment ajax soumet-il un formulaire et implémente-t-il le téléchargement de fichiers

Que diriez-vous des données json téléchargées par Traitement réussi en arrière-plan ajax

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!