Учебное пособие по примеру компонента Primefaces FileUpload
Сегодня мы рассмотрим компонент Primefaces FileUpload. HTML предоставляет вам тег ввода файла для выбора файла, но нам нужно гораздо больше, чтобы загрузить файл на сервер. Primefaces снял это бремя, предоставив вам готовый компонент FileUpload, который поможет вам создать красивый пользовательский интерфейс с поддержкой серверной части для загрузки файлов на сервер.
Файл PrimefacesЗагрузить
Мы рассмотрим функции компонента Primefaces FileUpload, которые вы можете использовать в своем приложении. В этом руководстве предполагается, что у вас есть базовые знания Primeface, если нет, перейдите к Примеру Primefaces.
Основная информация Primefaces FileUpload
Tag | fileUpload |
---|---|
Component Class | org.primefaces.component.fileupload.FileUpload |
Component Type | org.primefaces.component.FileUpload |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.FileUploadRenderer |
Renderer Class | org.primefaces.component.fileupload.FileUploadRenderer |
Атрибуты загрузки файлов Primefaces
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component. |
rendered | true | boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component than can be either an EL expression of a literal text |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id. |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component |
required | false | Boolean | Marks component as required. |
validator | null | MethodExpr | A method expression that refers to a method validating the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valueChangeEvent |
requiredMessage | null | String | Message to be displayed when required field validation fails |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fails. |
widgetVar | null | String | Name of the client side widget. |
update | null | String | Component(s) to update after fileupload completes. |
process | null | String | Component(s) to process in fileupload request. |
fileUploadListener | null | MethodExpr | Method to invoke when a file is uploaded. |
multiple | false | Boolean | Allows choosing of multi file uploads from native |
auto | false | Boolean | When set to true, selecting a file starts the upload process implicitly |
label | Choose | String | Label of the browse button. |
allowTypes | null | String | Regular expression for accepted file types, |
sizeLimit | null | Integer | Individual file size limit in bytes. |
fileLimit | null | Integer | Maximum number of files allowed to upload. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the component. |
mode | advanced | String | Mode of the fileupload, can be simple or advanced. |
uploadLabel | Upload | String | Label of the upload button. |
cancelLabel | Cancel | String | Label of the cancel button. |
invalidSizeMessage | null | String | Message to display when size limit exceeds. |
invalidFileMessage | null | String | Message to display when file is not accepted. |
fileLimitMessage | null | String | Message to display when file limit exceeds. |
dragDropSupport | true | Boolean | Specifies dragdrop based file selection from filesystem, default is true and works only on supported browsers |
onstart | null | String | Client side callback to execute when upload begins. |
onerror | null | String | Callback to execute if fileupload request fails. |
oncomplete | null | String | Client side callback to execute when upload ends. |
disabled | false | Boolean | Disables component when set true. |
messageTemplate | {name} {size} | String | Message template to use when displaying file validation errors |
previewWidth | 80 | Integer | Width for image previews in pixels. |
Пример загрузки файла Primefaces
Чтобы использовать FileUpload, вы должны предоставить механизм FileUpload, добавив параметр веб-развертывания primefaces.UPLOADER, который может принимать следующие значения: web.xml
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>auto|native|commons</param-value>
</context-param>
- автоматический: это режим по умолчанию, и Primefaces пытается определить лучший метод, проверяя среду выполнения, если среда выполнения JSF не ниже 2.2, выбран собственный загрузчик, в противном случае - обычный.
- native: в основном режиме для загрузки файлов используется часть API сервлета 3.x, и если время выполнения JSF меньше 2.2, создается исключение.
- commons: этот параметр выбирает commons fileUpload, для этого требуется следующая конфигурация фильтра в вашем дескрипторе развертывания.
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>
Обратите внимание, что имя сервлета должно совпадать с настроенным именем сервлета JSF, которым в данном случае является Faces Servlet. В качестве альтернативы вы также можете выполнить настройку на основе шаблона URL.
Простая загрузка файлов Primefaces
Простой режим загрузки файлов работает в устаревших браузерах с входным файлом, значение которого должно быть экземпляром UploadedFile. Загрузка Ajax не поддерживается при простой загрузке. Посмотрите ниже эти файлы, необходимые для создания простого примера загрузки файлов. 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>
В качестве резюме:
- Используется автоматический механизм загрузки файлов Primefaces.
- атрибут значения компонента fileUpload, связанный с экземпляром UploadedFile.
- Использование fileUpload требует включения компонента fileUpload в форму, его тип enc — multipart/form-data.
- Предоставленное фиктивное действие использовалось для распечатки имени и размера загруженного файла.
Расширенная загрузка файлов Primefaces
Компонент FileUpload предоставляет простой и расширенный режимы просмотра. Выбор расширенного просмотра делает единственным доступным способом доступа к загруженным файлам через FileUploadListener. Прослушиватель будет обработан, как только файл будет загружен и FileUploadEvent будет передано в прослушиватель в качестве параметра. Посмотрите ниже на необходимые файлы, которые помогут вам использовать расширенный режим. 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());
}
}
В качестве резюме:
- Ни web.xml, ни pom.xml не упоминались, потому что они не изменились.
- Атрибут value компонента FileUpload, связанный с экземпляром UploadedFile, поскольку компонент также прослушивается FileUploadListener.
- FileUploadListener получает событие FileUploadEvent в качестве параметра.
- После того как вы нажмете действие Загрузить , будет выполнен FileUploadListener, и будет создано и передано событие FileUploadEvent.
- Загруженный файл передается в FileUploadEvent, и к нему можно получить доступ, вызвав e.getFile() для объекта события, который возвращает экземпляр UploadedFile.
- Процесс загрузки будет полностью отменен, если вы нажмете «Отмена» вместо «Загрузить». Отмена загрузки предотвратит вызов прослушивателя.
Загрузка нескольких файлов Primefaces
Загрузка нескольких файлов с использованием компонента FileUpload применима, так что несколько файлов можно выбрать в диалоговом окне браузера. Множественные загрузки не поддерживаются в устаревших браузерах. Установите для множественного атрибута значение true, чтобы включить множественный выбор файлов, однако множественный выбор файлов не означает, что все файлы будут отправлены на сервер с помощью одного запроса. Тем не менее, они будут отправлены один за другим. Посмотрите ниже на необходимое изменение, которое делает возможным множественный выбор. 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());
}
}
- Отмена загрузки с помощью кнопки Отмена должна привести к отмене процесса загрузки всех файлов.
- Нажатие значка X рядом с каждым загружаемым файлом приведет к отмене только соответствующего загруженного файла.
- После того, как вы нажмете действие Загрузить, прослушиватель будет вызван количеством загружаемых файлов.
Автоматическая загрузка файлов Primefaces
Поведение по умолчанию требует, чтобы пользователи инициировали процесс загрузки, вы можете изменить этот способ, установив для параметра auto значение true. Автоматическая загрузка запускается, как только файлы выбираются в диалоговом окне. Посмотрите ниже на необходимые изменения, которые делают автоматическую загрузку применимой. 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>
Загрузка файла Primefaces Частичное обновление страницы
После завершения процесса загрузки файла вы можете использовать Primefaces PPR (частичный рендеринг страницы) для обновления любого компонента на странице. FileUpload снабжен атрибутом обновления для этой цели. В следующем примере отображается сообщение «Файл успешно загружен» с использованием компонента growl после загрузки файла. Компонент growl будет обсуждаться позже при поступлении сообщений. Следующий фрагмент кода помогает отображать сообщение после загрузки файла. 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"));
}
}
Фильтры загрузки файлов
Пользователям можно ограничить выбор только тех типов файлов, которые вы настроили. В приведенном ниже примере показано, как принимать только изображения. 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>
Ограничение размера загружаемого файла Primefaces и ограничение на размер файла
Иногда вам нужно ограничить размер загружаемого файла или количество загружаемых файлов. Выполнение таких ограничений не является большой проблемой для компонента Primefaces FileUpload. Вы можете добиться этих ограничений, указав атрибуты sizeLimit и fileLimit соответственно для самого FileUpload. Следуйте фрагментам кода, ограничивающим ваших пользователей: 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" multiple="true" fileLimit="3" sizeLimit="2048"
fileUploadListener="#{fileUploadManagedBean.fileUploadListener}" update="msg"></p:fileUpload>
</h:form>
</h:body>
</html>
Сообщение проверки загрузки файла Primefaces
Параметры invalidFileMessage, invalidSizeMessage и fileLimitMessage предоставляются для отображения сообщений проверки для пользователей. Вы можете предоставить любые сообщения для этих проверок. Посмотрите ниже на предоставленный пример. 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>
Сводка загрузки файлов Primefaces
Это руководство предназначено для предоставления вам полного подробного объяснения использования компонента FileUpload Primefaces. Компонент FileUpload оснащен множеством функций, которые позволяют сосредоточиться на бизнесе, а не пытаться реализовать что-то подобное. Вы можете загрузить образец проекта по ссылке ниже и использовать другие атрибуты fileUpload, чтобы узнать больше.
Скачать проект PrimeFaces FileUpload