Hướng dẫn ví dụ về thành phần fileupload trong PrimeFaces

Reading Time: 12 minutes

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.

PrimeFaces FileUpload

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ông tin cơ bản về PrimeFaces FileUpload

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

Các thuộc tính của PrimeFaces FileUpload

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>

1. auto: Đây là chế độ mặc định và PrimeFaces sẽ cố gắng tự động phát hiện phương thức phù hợp nhất bằng cách kiểm tra môi trường thực thi. Nếu runtime của JSF từ phiên bản 2.2 trở lên thì sẽ sử dụng native uploader, ngược lại sẽ sử dụng commons.
2. native: Chế độ native sử dụng API Part của servlet 3.x để tải tệp. Nếu runtime của JSF nhỏ hơn 2.2 thì một ngoại lệ sẽ được ném ra.
3. commons: Tùy chọn này sử dụng commons fileUpload, và yêu cầu cấu hình bộ lọc (filter) sau trong tệp cấu hình triển khai (deployment descriptor). 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.

Tải tệp đơn giản của PrimeFaces (Simple File Upload)

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:

1. Engine tải tệp (FileUpload engine) của PrimeFaces được sử dụng là chế độ tự động.
2. Thuộc tính value của thành phần fileUpload được liên kết với một đối tượng UploadedFile.
3. Để sử dụng fileUpload, cần đặt thành phần này bên trong một form có thuộc tính enctype là multipart/form-data.
4. Một hành động giả lập (dummy action) được sử dụng để in ra tên và kích thước của tệp đã tải lên.
5. Kết quả của ví dụ demo sẽ là: một nút nhập liệu đơn giản được hiển thị trên trình duyệt của bạn.

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.

Tải tệp nâng cao trong PrimeFaces

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:

1. Không có đề cập đến web.xml hay pom.xml vì chúng không có thay đổi nào.
2. Thuộc tính value của thành phần FileUpload được liên kết với một đối tượng UploadedFile, đồng thời thành phần này cũng được lắng nghe bởi FileUploadListener.
3. FileUploadListener sẽ nhận một đối tượng FileUploadEvent làm tham số.
4. Khi bạn nhấn vào nút Upload, FileUploadListener sẽ được thực thi và một FileUploadEvent sẽ được tạo và truyền vào. Kết quả của ví dụ demo sẽ là một giao diện mới của thành phần tải tệp (upload component), trong đó xuất hiện hai nút bổ sung; một nút để tải lên (upload) và một nút để hủy (cancel).

Điều quan trọng là phải lưu ý những điểm sau đây khi thực hiện:

1. Tệp đã tải lên sẽ được truyền vào bên trong đối tượng FileUploadEvent, và bạn có thể truy cập nó bằng cách gọi e.getFile() trên đối tượng sự kiện. Phương thức này sẽ trả về một đối tượng UploadedFile.
2. Nếu bạn nhấn nút Cancel thay vì Upload, quá trình tải tệp sẽ bị hủy hoàn toàn. Khi hủy, listener sẽ không được kích hoạt.

Tải nhiều tệp trong PrimeFaces

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:

1. Khi nhấn nút Cancel, quá trình tải tất cả các tệp sẽ bị hủy.
2. Khi nhấn vào biểu tượng X bên cạnh từng tệp riêng lẻ đang chờ tải lên, chỉ tệp tương ứng đó sẽ bị hủy.
3. Khi bạn nhấn vào nút Upload, listener sẽ được gọi tương ứng với số lượng tệp đã được tải lên.

Tải tệp tự động trong PrimeFaces

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.

Cập nhật một phần trang sau khi tải tệp trong PrimeFaces

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.

Bộ lọc tải tệp lên

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:

Giới hạn kích thước và số lượng tệp tải lên trong PrimeFaces

Đô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:

Thông báo kiểm tra hợp lệ khi tải tệp trong PrimeFaces

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.

Tóm tắt về FileUpload trong PrimeFaces

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.