[Thực hành] Upload file

4. Validation, Exception & Cookie

admin

8-09-2020

NỘI DUNG BÀI VIẾT

Mục tiêu

Luyện tập upload file trong ứng dụng Spring MVC.

Mô tả

Trong phần này, chúng ta sẽ phát triển một ứng dụng gallery ảnh đơn giản.

Ứng dụng có các chức năng chính:

Upload file ảnh
Hiển thị danh sách các ảnh đã upload
Xem các ảnh đã upload

Hướng dẫn

Bước 1: Tạo project sử dụng maven hoặc gradle

Bước 2: Tạo Controllers và Form

Tạo MyFileUploadController.java

@Controller

public class MyFileUploadController {

  // Phương thức này được gọi mỗi lần có Submit.

  @InitBinder

  public void initBinder(WebDataBinder dataBinder) {

     Object target = dataBinder.getTarget();

     if (target == null) {

        return;

     }

     System.out.println("Target=" + target);

     if (target.getClass() == MyUploadForm.class) {

        // Đăng ký để chuyển đổi giữa các đối tượng multipart thành byte[]

        dataBinder.registerCustomEditor(byte[].class, new ByteArrayMultipartFileEditor());

     }

  }

  // GET: Hiển thị trang form upload

  @RequestMapping(value = "/uploadOneFile", method = RequestMethod.GET)

  public String uploadOneFileHandler(Model model) {

     MyUploadForm myUploadForm = new MyUploadForm();

     model.addAttribute("myUploadForm", myUploadForm);

     // Forward to "/WEB-INF/pages/uploadOneFile.jsp".

     return "uploadOneFile";

  }

  // POST: Xử lý Upload

  @RequestMapping(value = "/uploadOneFile", method = RequestMethod.POST)

  public String uploadOneFileHandlerPOST(HttpServletRequest request, Model model, @ModelAttribute("myUploadForm") MyUploadForm myUploadForm) {

     return this.doUpload(request, model, myUploadForm);

  }

  // GET: Hiển thị trang form upload

  @RequestMapping(value = "/uploadMultiFile", method = RequestMethod.GET)

  public String uploadMultiFileHandler(Model model) {

     MyUploadForm myUploadForm = new MyUploadForm();

     model.addAttribute("myUploadForm", myUploadForm);

     // Forward to "/WEB-INF/pages/uploadMultiFile.jsp".

     return "uploadMultiFile";

  }

 

  // POST: Xử lý Upload

  @RequestMapping(value = "/uploadMultiFile", method = RequestMethod.POST)

  public String uploadMultiFileHandlerPOST(HttpServletRequest request, Model model, @ModelAttribute("myUploadForm") MyUploadForm myUploadForm) { 

     return this.doUpload(request, model, myUploadForm);

  }

  private String doUpload(HttpServletRequest request, Model model, MyUploadForm myUploadForm) {

     String description = myUploadForm.getDescription();

     System.out.println("Description: " + description);

     // Thư mục gốc upload file.

     String uploadRootPath = request.getServletContext().getRealPath("upload");

     System.out.println("uploadRootPath=" + uploadRootPath);

     File uploadRootDir = new File(uploadRootPath);

     // Tạo thư mục gốc upload nếu nó không tồn tại.

     if (!uploadRootDir.exists()) {

        uploadRootDir.mkdirs();

     }

     CommonsMultipartFile[] fileDatas = myUploadForm.getFileDatas();

     Map<File, String> uploadedFiles = new HashMap();

     for (CommonsMultipartFile fileData : fileDatas) { 

        // Tên file gốc tại Client.

        String name = fileData.getOriginalFilename();

        System.out.println("Client File Name = " + name);

        if (name != null && name.length() > 0) {

           try {

              // Tạo file tại Server.

              File serverFile = new File(uploadRootDir.getAbsolutePath() + File.separator + name);

              // Luồng ghi dữ liệu vào file trên Server.

              BufferedOutputStream stream = new BufferedOutputStream(new FileOutputStream(serverFile));

              stream.write(fileData.getBytes());

              stream.close();

              uploadedFiles.put(serverFile, name);

              System.out.println("Write file: " + serverFile);

           } catch (Exception e) {

              System.out.println("Error Write file: " + name);

           }

        }

     }

     model.addAttribute("description", description);

     model.addAttribute("uploadedFiles", uploadedFiles);

     return "uploadResult";

  } 

}

 

Tạo MyUploadForm.java

public class MyUploadForm {

   private String description;

   // Upload files.

   private CommonsMultipartFile[] fileDatas;

   public String getDescription() {

       return description;

   }

   public void setDescription(String description) {

       this.description = description;

   }

   public CommonsMultipartFile[] getFileDatas() {

       return fileDatas;

   }

   public void setFileDatas(CommonsMultipartFile[] fileDatas) {

       this.fileDatas = fileDatas;

   }

}

Bước 3: Xây dựng Views

Tạo file _menu.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<div style="border:1px solid #ccc;padding:5px;">

 <a href="${pageContext.request.contextPath}/uploadOneFile">Upload One File</a> | 

 <a href="${pageContext.request.contextPath}/uploadMultiFile">Upload Multi File</a>

</div>

Chú ý: Trên các form để upload dữ liệu bạn cần có thuộc tính enctype="multipart/form-data".

 

Tạo file uploadOneFile.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Upload Multi File</title>

</head>

<body>

  <jsp:include page="_menu.jsp"/>

  <h3>Upload Multiple File:</h3>

   <!-- MyUploadForm -->

   <form:form modelAttribute="myUploadForm" method="POST" action="" enctype="multipart/form-data">

       Description:

       <br>

       <form:input path="description" style="width:300px;"/>               

       <br/><br/>                

       File to upload (1): <form:input path="fileDatas" type="file"/><br />     

       File to upload (2): <form:input path="fileDatas" type="file"/><br />   

       File to upload (3): <form:input path="fileDatas" type="file"/><br />   

       File to upload (4): <form:input path="fileDatas" type="file"/><br />   

       File to upload (5): <form:input path="fileDatas" type="file"/><br />   

       <input type="submit" value="Upload">

   </form:form>

</body>

</html>

 

Tạo file uploadMultiFile.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Upload One File</title>

</head>

<body>

   <jsp:include page="_menu.jsp"/>

   <h3>Upload One File:</h3>

   <!-- MyUploadForm -->

   <form:form modelAttribute="myUploadForm" method="POST" action="" enctype="multipart/form-data"> 

       Description:

       <br>

       <form:input path="description" style="width:300px;"/>               

       <br/><br/> 

       File to upload: <form:input path="fileDatas" type="file"/><br /> 

       <input type="submit" value="Upload">

   </form:form>

</body>

</html>

 

Tạo file uploadResult.jsp

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>

<head>

<meta charset="UTF-8">

<title>Upload Result</title>

</head>

<body>

   <jsp:include page="_menu.jsp"/>

   <h3>Uploaded Files:</h3>

   Description: ${description}

   <br/>

   <c:forEach items="${uploadedFiles}" var="file">

          - ${file} <br>

   </c:forEach>

</body>

</html>