Home >Web Front-end >JS Tutorial >Simple implementation of Ajax uploading pictures and previewing them

Simple implementation of Ajax uploading pictures and previewing them

亚连Original: 2018-05-23 14:30:041821browse

Below I will bring you a simple implementation of Ajax uploading pictures and previewing them. Let me share it with you now and give it as a reference for everyone.

1. Go directly to the simplest ajax asynchronous upload image and preview

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Summary of file upload skills based on ajax html

A simple example of using XPath in dom4j

A brief discussion on Bootstrap’s DatePicker date range selection

The above is the detailed content of Simple implementation of Ajax uploading pictures and previewing them. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary of file upload skills based on ajax htmlNext article：Summary of file upload skills based on ajax html

See more

Simple implementation of Ajax uploading pictures and previewing them

Related articles