srcmini本文概述
它是一个输入组件, 用于将文件上传到服务器。它允许我们将文件从浏览器上传到服务器。它包括HTML5功能, 并具有带有进度栏和其他有用按钮的漂亮用户界面。
PrimeFaces通过检测选择最合适的上载器引擎, 并且可以强制一个或另一个使用可选配置参数。
<p：fileUpload>组件用于在JSF应用程序中创建文件上传按钮。
FileUpload属性
| Attribute | 默认值 | Type | Description |
|---|---|---|---|
| required | false | Boolean | 用于根据需要标记组件。 |
| validator | null | MethodExpr | 用于设置组件的验证器。 |
| requiredMessage | null | String | 用于设置必填字段验证失败时显示的消息。 |
| update | null | String | 它用于在文件上传完成后设置更新。 |
| process | null | String | 用于设置文件上传请求中的进程。 |
| fileUploadListener | null | MethodExpr | 上传文件时调用的方法。 |
| multiple | false | Boolean | 它允许从本机文件浏览对话框中选择多个文件上传。 |
| auto | false | Boolean | 用于设置自动上传文件。 |
| label | choose | String | 它是浏览按钮的标签。 |
| allowTypes | null | String | 用于设置文件的允许类型。 |
| sizeLimit | null | Integer | 用于设置文件大小限制。 |
| fileLimit | null | Integer | 它用于设置允许上传的最大文件数。 |
| invalidSizeMessage | null | String | 它用于设置超过大小限制时显示的消息。 |
| fileLimitMessage | null | String | 用于设置超出文件限制时显示的消息。 |
| accept | null | String | 它用于在本机文件浏览器对话框中设置过滤器文件。 |
| sequential | false | Boolean | 它用于允许顺序文件上传。 |
例子
在下面的示例中, 我们正在实现<p：fileUpload>组件。本示例包含以下文件。
JSF文件
// fileUpload.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>File Uploads</title>
</h:head>
<h:body>
<h:form>
<p:fileUpload fileUploadListener="#{fileUpload.handleFileUpload}" mode="advanced" dragDropSupport="false"
update="messages" sizeLimit="100000" fileLimit="3" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
<p:growl id="messages" showDetail="true" />
</h:form>
</h:body>
</html>ManagedBean
// FileUpload.java
package com.srcmini;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.FileUploadEvent;
@ManagedBean
public class FileUpload {
public void handleFileUpload(FileUploadEvent event) {
FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
FacesContext.getCurrentInstance().addMessage(null, message);
}
}输出
单击选择按钮并上传文件。
单击上载按钮, 将开始上载。
上传完成后, 它会显示一条消息。
评论前必须登录！
注册