PrimeFace FileUpload文件上传实例

本文概述

  • FileUpload属性
  • 例子
它是一个输入组件, 用于将文件上传到服务器。它允许我们将文件从浏览器上传到服务器。它包括HTML5功能, 并具有带有进度栏和其他有用按钮的漂亮用户界面。
【PrimeFace FileUpload文件上传实例】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; @ManagedBeanpublic class FileUpload {public void handleFileUpload(FileUploadEvent event) {FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded."); FacesContext.getCurrentInstance().addMessage(null, message); }}

输出
单击选择按钮并上传文件。
PrimeFace FileUpload文件上传实例

文章图片
单击上载按钮, 将开始上载。
PrimeFace FileUpload文件上传实例

文章图片
上传完成后, 它会显示一条消息。
PrimeFace FileUpload文件上传实例

文章图片

    推荐阅读