- Sản phẩm & Dịch vụSản phẩm & Dịch vụ
- Giải phápGiải pháp
- Bảng giáBảng giá
- Công tyCông ty
- Tài liệuTài liệu
vi
vi
Chuyên mục với các bài viết hướng dẫn, nghiên cứu và phân tích chi tiết về kỹ thuật, các xu hướng công nghệ mới nhất dành cho lập trình viên.
Technical Writer
I have over 5 years of experience writing technical documentation for tech products, making them accessible and user-friendly. My focus is always on providing clear and precise information. @#@ Tôi đã có hơn 5 năm kinh nghiệm viết tài liệu kỹ thuật cho các sản phẩm công nghệ, giúp người dùng dễ dàng tiếp cận và sử dụng. Tôi luôn tập trung vào việc cung cấp thông tin chính xác và dễ hiểu.
Thảo luận (0)
Đăng nhập để thảo luận
Hôm nay, chúng ta sẽ tìm hiểu về thành phần FileUpload trong PrimeFaces.
HTML cung cấp thẻ input dạng file để bạn có thể chọn tệp, nhưng để thực sự tải tệp lên máy chủ, chúng ta cần nhiều thao tác hơn thế.
PrimeFaces đã giúp đơn giản hóa quá trình này bằng cách cung cấp sẵn một thành phần FileUpload không chỉ giúp bạn tạo giao diện người dùng đẹp mắt, mà còn hỗ trợ xử lý phía backend để tải tệp lên máy chủ một cách dễ dàng.
Chúng ta sẽ cùng tìm hiểu các tính năng của thành phần FileUpload trong PrimeFaces mà bạn có thể sử dụng trong ứng dụng của mình. Hướng dẫn này giả định rằng bạn đã có kiến thức cơ bản về PrimeFaces. Nếu chưa, bạn nên tham khảo bài Ví dụ PrimeFaces trước để nắm được nền tảng cần thiết.
| Thẻ | Lớp thành phần |
|---|---|
| Lớp thành phần (Component Class) | org.primefaces.component.fileupload.FileUpload |
| Loại thành phần (Component Type) | org.primefaces.component.FileUpload |
| Nhóm thành phần (Component Family) | org.primefaces.component |
| Loại trình kết xuất (Renderer Type) | org.primefaces.component.FileUploadRenderer |
| Lớp trình kết xuất (Renderer Class) | org.primefaces.component.fileupload.FileUploadRenderer |
| Tên thuộc tính | Giá trị mặc định | Kiểu dữ liệu | Mô tả |
|---|---|---|---|
| id | null | String | Mã định danh duy nhất của thành phần. |
| rendered | true | boolean | Giá trị Boolean để chỉ định cách hiển thị thành phần, khi đặt thành false thành phần sẽ không được hiển thị |
| binding | null | Object | Biểu thức EL ánh xạ đến một thể hiện UIComponent trên phía server (trong backing bean). |
| value | null | Object | Giá trị của thành phần, có thể là biểu thức EL hoặc văn bản tĩnh. |
| converter | null | Converter/String | Biểu thức EL hoặc chuỗi tĩnh để xác định bộ chuyển đổi (converter). Khi là một biểu thức EL, nó được phân giải thành một thể hiện của bộ chuyển đổi. Trong trường hợp là một văn bản tĩnh, nó phải tham chiếu đến một ID của bộ chuyển đổi. |
| immediate | false | Boolean | Nếu đặt là true, quá trình kiểm tra hợp lệ (validation) sẽ diễn ra sớm hơn, ở giai đoạn “Apply Request Values”. |
| required | false | Boolean | Đánh dấu thành phần theo yêu cầu. |
| validator | null | MethodExpr | Một biểu thức phương thức tham chiếu đến phương thức xác thực đầu vào |
| valueChangeListener | null | MethodExpr | Biểu thức phương thức tham chiếu đến hàm xử lý khi giá trị thay đổi. |
| requiredMessage | null | String | Thông báo sẽ hiển thị khi xác thực trường bắt buộc không thành công |
| converterMessage | null | String | Thông báo hiển thị khi việc chuyển đổi dữ liệu bị lỗi. |
| validatorMessage | null | String | Thông báo hiển thị khi kiểm tra tính hợp lệ bị lỗi. |
| widgetVar | null | String | Tên biến widget ở phía client. |
| update | null | String | Thành phần (component) sẽ được cập nhật sau khi quá trình tải tệp hoàn tất. |
| process | null | String | Thành phần sẽ được xử lý trong request tải tệp. |
| fileUploadListener | null | MethodExpr | Phương thức được gọi khi tệp được tải lên thành công. |
| multiple | false | Boolean | Cho phép lựa chọn tải lên nhiều tệp từ nguồn gốc |
| auto | false | Boolean | Khi được đặt thành true, việc chọn một tệp sẽ bắt đầu quá trình tải lên một cách ngầm định |
| label | Choose | String | Nhãn của nút chọn tệp. |
| allowTypes | null | String | Biểu thức regex chỉ định các định dạng tệp được chấp nhận. |
| sizeLimit | null | Integer | Giới hạn kích thước tối đa cho mỗi tệp (đơn vị: byte). |
| fileLimit | null | Integer | Số lượng tệp tối đa được phép tải lên. |
| style | null | String | Kiểu nội tuyến của thành phần. |
| styleClass | null | String | Lớp kiểu của thành phần. |
| mode | advanced | String | Chế độ tải tệp lên có thể đơn giản hoặc nâng cao. |
| uploadLabel | Upload | String | Nhãn của nút tải lên. |
| cancelLabel | Cancel | String | Nhãn của nút hủy tải lên. |
| invalidSizeMessage | null | String | Thông báo khi vượt quá giới hạn kích thước cho phép. |
| invalidFileMessage | null | String | Thông báo khi tệp không được chấp nhận. |
| fileLimitMessage | null | String | Thông báo khi vượt quá số lượng tệp cho phép. |
| dragDropSupport | true | Boolean | Chỉ định lựa chọn tệp dựa trên kéo thả từ hệ thống tệp, mặc định là true và chỉ hoạt động trên các trình duyệt được hỗ trợ |
| onstart | null | String | Gọi lại phía máy khách để thực hiện khi quá trình tải lên bắt đầu. |
| onerror | null | String | Gọi lại để thực thi nếu yêu cầu tải tệp lên không thành công. |
| oncomplete | null | String | Gọi lại phía máy khách để thực thi khi quá trình tải lên kết thúc. |
| disabled | false | Boolean | Vô hiệu hóa thành phần khi đặt thành true. |
| messageTemplate | {name} {size} | String | Mẫu tin nhắn sử dụng khi hiển thị lỗi xác thực tệp |
| previewWidth | 80 | Integer | Chiều rộng xem trước hình ảnh (đơn vị: pixel). |
Ví dụ về Tải Tệp (File Upload) trong PrimeFaces
Để sử dụng tính năng FileUpload, bạn cần cung cấp engine tải tệp bằng cách thêm tham số triển khai web primefaces.UPLOADER có thể nhận các giá trị sau: web.xml
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>auto|native|commons</param-value>
</context-param>
web.xml<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>
org.primefaces.webapp.filter.FileUploadFilter
</filter-class>
</filter>
<filter-mapping>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
Lưu ý rằng servlet-name phải khớp với tên của servlet JSF đã được cấu hình, trong trường hợp này là Faces Servlet. Ngoài ra, bạn cũng có thể cấu hình dựa trên URL-pattern nếu muốn.
Chế độ simple file upload hoạt động trên các trình duyệt cũ, sử dụng một trường nhập tệp (file input) mà giá trị của nó phải là một đối tượng UploadedFile. Chế độ này không hỗ trợ Ajax upload. Xem bên dưới để biết các tệp cần thiết cho một ví dụ tải tệp đơn giản. index.xhtml.
<html xmlns="<https://www.w3.org/1999/xhtml>"
xmlns:ui="<https://java.sun.com/jsf/facelets>"
xmlns:h="<https://java.sun.com/jsf/html>"
xmlns:f="<https://java.sun.com/jsf/core>"
xmlns:p="<https://primefaces.org/ui>">
<h:head>
<title>Journaldev Tutorial</title>
</h:head>
<h:body>
<h:form enctype="multipart/form-data">
<p:fileUpload value="#{fileUploadManagedBean.file}" mode="simple"></p:fileUpload>
<p:separator/>
<h:commandButton value="Dummy Action" action="#{fileUploadManagedBean.dummyAction}"></h:commandButton>
</h:form>
</h:body>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.model.UploadedFile;
@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
UploadedFile file;
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
public String dummyAction(){
System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
return "";
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="<https://www.w3.org/2001/XMLSchema-instance>"
xmlns="<https://java.sun.com/xml/ns/javaee>" xmlns:web="<https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd>"
xsi:schemaLocation="<https://java.sun.com/xml/ns/javaee>
<https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd>"
id="WebApp_ID" version="2.5" metadata-complete="true">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>auto</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>
pom.xml
<project xmlns="<https://maven.apache.org/POM/4.0.0>" xmlns:xsi="<https://www.w3.org/2001/XMLSchema-instance>"
xsi:schemaLocation="<https://maven.apache.org/POM/4.0.0> <https://maven.apache.org/maven-v4_0_0.xsd>">
<modelVersion>4.0.0</modelVersion>
<groupId>com.journaldev</groupId>
<artifactId>Primefaces-FileUpload-Sample</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>Primefaces-FileUpload-Sample Maven Webapp</name>
<url><https://maven.apache.org></url>
<repositories>
<repository>
<id>prime-repo</id>
<name>PrimeFaces Maven Repository</name>
<url><https://repository.primefaces.org></url>
<layout>default</layout>
</repository>
</repositories>
<dependencies>
<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!-- Faces Implementation -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Faces Library -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Primefaces Version 5 -->
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.0</version>
</dependency>
<!-- JSP Library -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<!-- JSTL Library -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
</dependencies>
</project>
Tóm lại:
Và khi bạn nhấn vào nút Dummy Action, một phương thức hành động giả lập (dummy action method) sẽ được thực thi và thông tin của tệp đã tải lên sẽ được in ra bảng điều khiển (console) như ví dụ bên dưới.
Thành phần FileUpload cung cấp cho bạn chế độ xem đơn giản và chế độ xem nâng cao. Việc chọn chế độ xem nâng cao đồng nghĩa với việc cách duy nhất để truy cập các tệp đã tải lên là thông qua FileUploadListener. Trình lắng nghe sẽ được xử lý ngay khi tệp được tải lên, và một đối tượng FileUploadEvent sẽ được truyền vào listener dưới dạng tham số. Xem bên dưới các tệp cần thiết để sử dụng chế độ nâng cao. index.xhtml
<html xmlns="<https://www.w3.org/1999/xhtml>"
xmlns:ui="<https://java.sun.com/jsf/facelets>"
xmlns:h="<https://java.sun.com/jsf/html>"
xmlns:f="<https://java.sun.com/jsf/core>"
xmlns:p="<https://primefaces.org/ui>">
<h:head>
<title>Journaldev Tutorial</title>
</h:head>
<h:body>
<h:form enctype="multipart/form-data" style="width:500px">
<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced"
fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"></p:fileUpload>
</h:form>
</h:body>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;
@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
UploadedFile file;
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
public void fileUploadListener(FileUploadEvent e){
// Get uploaded file from the FileUploadEvent
this.file = e.getFile();
// Print out the information of the file
System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
}
}
Tóm tắt:
Điều quan trọng là phải lưu ý những điểm sau đây khi thực hiện:
Việc tải nhiều tệp bằng thành phần FileUpload là hoàn toàn khả thi, cho phép người dùng chọn nhiều tệp từ hộp thoại của trình duyệt. Tuy nhiên, trình duyệt cũ (legacy browsers) sẽ không hỗ trợ tính năng này. Để bật chức năng chọn nhiều tệp, bạn cần thiết lập thuộc tính multiple thành true. Tuy nhiên, việc chọn nhiều tệp không có nghĩa là tất cả các tệp sẽ được gửi lên server trong một lần yêu cầu. Thay vào đó, các tệp sẽ được gửi từng cái một. Hãy xem bên dưới để biết thay đổi cần thiết giúp áp dụng nhiều lựa chọn. index.xhtml
<html xmlns="<https://www.w3.org/1999/xhtml>"
xmlns:ui="<https://java.sun.com/jsf/facelets>"
xmlns:h="<https://java.sun.com/jsf/html>"
xmlns:f="<https://java.sun.com/jsf/core>"
xmlns:p="<https://primefaces.org/ui>">
<h:head>
<title>Journaldev Tutorial</title>
</h:head>
<h:body>
<h:form enctype="multipart/form-data" style="width:500px">
<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced" multiple="true"
fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"></p:fileUpload>
</h:form>
</h:body>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;
@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
UploadedFile file;
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
public void fileUploadListener(FileUploadEvent e){
// Get uploaded file from the FileUploadEvent
this.file = e.getFile();
// Print out the information of the file
System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
}
}
Kết quả khi chạy ứng dụng sẽ trông giống như sau:
Điều quan trọng là phải lưu ý những điểm sau trong bản demo:
Theo mặc định, người dùng cần chủ động nhấn nút Upload để bắt đầu quá trình tải tệp. Bạn có thể thay đổi hành vi này bằng cách đặt thuộc tính auto thành true. Khi đó, việc tải tệp sẽ tự động bắt đầu ngay sau khi người dùng chọn tệp từ hộp thoại. Xem bên dưới để biết thay đổi cần thiết để áp dụng tính năng tải lên tự động. index.xhtml
<html xmlns="<https://www.w3.org/1999/xhtml>"
xmlns:ui="<https://java.sun.com/jsf/facelets>"
xmlns:h="<https://java.sun.com/jsf/html>"
xmlns:f="<https://java.sun.com/jsf/core>"
xmlns:p="<https://primefaces.org/ui>">
<h:head>
<title>Journaldev Tutorial</title>
</h:head>
<h:body>
<h:form enctype="multipart/form-data" style="width:500px">
<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced" multiple="true" auto="true"
fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"></p:fileUpload>
</h:form>
</h:body>
</html>
Kết quả khi chạy ứng dụng sẽ hiển thị như hình dưới đây:
Ngay khi bạn nhấn Open trong cửa sổ trình duyệt, quá trình tải tệp sẽ bắt đầu ngay lập tức.
Sau khi quá trình tải tệp (fileUpload) hoàn tất, bạn có thể sử dụng tính năng PPR (Partial Page Render) của PrimeFaces để cập nhật bất kỳ thành phần nào trên trang. Thành phần FileUpload được trang bị thuộc tính cập nhật để phục vụ mục đích này. Ví dụ dưới đây sẽ hiển thị thông báo “File Uploaded Successfully” bằng cách sử dụng thành phần growl sau khi tệp được tải lên. Thành phần Growl sẽ được trình bày sau, trong phần nói về thông báo (messages). Đoạn mã sau đây sẽ giúp bạn hiển thị tin nhắn sau khi tệp đã được tải lên. index.xhtml
<html xmlns="<https://www.w3.org/1999/xhtml>"
xmlns:ui="<https://java.sun.com/jsf/facelets>"
xmlns:h="<https://java.sun.com/jsf/html>"
xmlns:f="<https://java.sun.com/jsf/core>"
xmlns:p="<https://primefaces.org/ui>">
<h:head>
<title>Journaldev Tutorial</title>
</h:head>
<h:body>
<h:form enctype="multipart/form-data" style="width:500px">
<p:growl id="msg"></p:growl>
<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced"
fileUploadListener="#{fileUploadManagedBean.fileUploadListener}" update="msg"></p:fileUpload>
</h:form>
</h:body>
</html>
package com.journaldev.prime.faces.beans;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;
@ManagedBean
@SessionScoped
public class FileUploadManagedBean {
UploadedFile file;
public UploadedFile getFile() {
return file;
}
public void setFile(UploadedFile file) {
this.file = file;
}
public void fileUploadListener(FileUploadEvent e){
// Get uploaded file from the FileUploadEvent
this.file = e.getFile();
// Print out the information of the file
System.out.println("Uploaded File Name Is :: "+file.getFileName()+" :: Uploaded File Size :: "+file.getSize());
// Add message
FacesContext.getCurrentInstance().addMessage(null,new FacesMessage("File Uploaded Successfully"));
}
}
Kết quả khi thực thi sẽ hiển thị như sau:
Một thông báo đã được thêm vào trong FacesContext, và thành phần FileUpload có định nghĩa thuộc tính update, điều này sẽ khiến thông báo được hiển thị thông qua cơ chế Ajax. Hành vi Ajax sẽ được trình bày chi tiết hơn trong một hướng dẫn riêng sau.
Người dùng có thể bị hạn chế chỉ chọn các loại tệp bạn đã cấu hình. Ví dụ dưới đây minh họa cách thiết lập để chỉ cho phép chọn tệp hình ảnh. index.xhtml
<html xmlns="<https://www.w3.org/1999/xhtml>"
xmlns:ui="<https://java.sun.com/jsf/facelets>"
xmlns:h="<https://java.sun.com/jsf/html>"
xmlns:f="<https://java.sun.com/jsf/core>"
xmlns:p="<https://primefaces.org/ui>">
<h:head>
<title>Journaldev Tutorial</title>
</h:head>
<h:body>
<h:form enctype="multipart/form-data" style="width:500px">
<p:growl id="msg"></p:growl>
<p:fileUpload value="#{fileUploadManagedBean.file}" mode="advanced" allowTypes="/(\\.|\\/)(gif|jpe?g|png)$/"
fileUploadListener="#{fileUploadManagedBean.fileUploadListener}" update="msg"></p:fileUpload>
</h:form>
</h:body>
</html>
Và kết quả khi thực thi sẽ hiển thị như sau:
Đôi khi, bạn cần giới hạn kích thước của tệp được tải lên hoặc số lượng tệp mà người dùng có thể tải lên. Việc thiết lập các giới hạn này trong thành phần FileUpload của PrimeFaces không hề phức tạp. Bạn có thể thực hiện điều này bằng cách cung cấp các thuộc tính sizeLimit và fileLimit trực tiếp trong thành phần FileUpload. Sau đây là các đoạn mã giúp hạn chế người dùng của bạn: index.xhtml Khi bạn cố gắng tải lên hơn ba tệp hoặc một tệp có kích thước vượt quá giới hạn, thông báo lỗi sẽ được hiển thị như sau:
Các tùy chọn invalidFileMessage, invalidSizeMessage và fileLimitMessage được cung cấp để hiển thị thông báo kiểm tra hợp lệ (validation messages) cho người dùng. Bạn có thể tự do tùy chỉnh nội dung các thông báo này theo ý muốn để phù hợp với ngữ cảnh sử dụng. Xem ví dụ bên dưới trong tệp index.xhtml.
<html xmlns="<https://www.w3.org/1999/xhtml>"
xmlns:ui="<https://java.sun.com/jsf/facelets>"
xmlns:h="<https://java.sun.com/jsf/html>"
xmlns:f="<https://java.sun.com/jsf/core>"
xmlns:p="<https://primefaces.org/ui>">
<h:head>
<title>Journaldev Tutorial</title>
</h:head>
<h:body>
<h:form enctype="multipart/form-data" style="width:500px">
<p:growl id="msg"></p:growl>
<p:fileUpload value="#{fileUploadManagedBean.file}"
invalidSizeMessage="JournalDev: Invalid Size"
invalidFileMessage="JournalDev: Invalid File Type"
fileLimitMessage="JournalDev: Invalid File Limit"
mode="advanced" multiple="true" fileLimit="3" sizeLimit="2048"
allowTypes="/(\\.|\\/)(gif|jpe?g|png)$/"
fileUploadListener="#{fileUploadManagedBean.fileUploadListener}"
update="msg"></p:fileUpload>
</h:form>
</h:body>
</html>
Và các thông báo sẽ hiển thị như sau:
Nếu bạn để ý, các thông báo đã được thay đổi và hiện đang hiển thị với nội dung văn bản khác. Khi xem mã trong managed bean, bạn sẽ thấy rằng chúng ta không xử lý gì với tệp cả. Tuy nhiên, trong các tình huống thực tế, bạn có thể sử dụng phương thức getInputStream() của đối tượng UploadedFile để lấy dữ liệu tệp và lưu vào server hoặc cơ sở dữ liệu.
Hướng dẫn này nhằm giải thích chi tiết về cách sử dụng thành phần FileUpload trong PrimeFaces. Thành phần FileUpload được trang bị rất nhiều tính năng, giúp bạn tập trung vào nghiệp vụ thay vì phải tự triển khai chức năng tải tệp từ đầu. Bạn có thể tải xuống dự án mẫu từ liên kết bên dưới và thử nghiệm thêm các thuộc tính khác của fileUpload để hiểu sâu hơn.