FileUpload vai além do type="file" funcionalidade de entrada do navegador "file" no HTML5.
Informações
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 |
Atributos
Nome | Default | Tipo | Descrição |
---|---|---|---|
id | null | String | Identificador único do componente |
rendered | true | boolean | Valor booleano para especificar a 'exibição' do componente, quando definido como falso componente não será exibido. |
binding | null | Object | Uma expressão 'el' que mapeia para um lado do servidor Instância 'UIComponent' em um 'bean' de apoio. |
value | null | Object | Valor do componente pode ser de uma expressão 'el' de um texto literal. |
converter | null | Converter /String | Uma expressão el ou um texto literal que define um conversor para o componente. Quando é um EL expressão, está resolvido para uma instância do conversor. em caso é um texto estático, ele deve se referir a um ID de conversor. |
immediate | false | Boolean | Quando definido 'true', validações de processo lógica é executado em fase de aplicação 'apply request' do JSF |
required | false | Boolean | Marca componente tornando-o 'obrigatório' |
validator | null | SeuMétodo | Um método de expressão que se refere a um método validation de entrada. |
valueChangeListener | null | SeuMétodo | Um método de expressão que se refere a um método para manipulação de um 'value change event' |
requiredMessage | null | String | Mensagem a ser exibida quando o campo necessário validação falhar. |
converterMessage | null | String | Mensagem a ser exibida quando a conversão falhar |
validatorMessage | null | String | Mensagem a ser exibida quando a validação falhar |
widgetVar | null | String | Nome do widget do lado do cliente |
update | null | String | Componente (s) para atualizar após fileupload concluída |
process | null | String | Componente (s) para processar nas requisições fileupload |
fileUploadListener | null | SeuMétodo | Método para invocar quando um arquivo é enviado. |
multiple | false | Boolean | Permite a escolha de uploads de arquivos a partir de vários nativa diálogo de procura de arquivos |
auto | false | Boolean | Quando definido como 'true', a seleção de um arquivo inicia o carregamento processar implicitamente. |
label | Choose | String | Rótulo do botão de navegação |
allowTypes | null | String | A expressão regular para os tipos de arquivos aceitos, por exemplo /(\.|\/)(gif|jpe?g|png)$/ |
sizeLimit | null | Integer | Limite de tamanho de arquivo individual em bytes. |
fileLimit | null | Integer | Número máximo de arquivos permitidos para upload |
style | null | String | Estilo alinhado do componente. |
styleClass | null | String | Classe de estilo do componente |
mode | advanced | String | Modo da fileupload, pode ser 'simple' ou 'advanced' |
uploadLabel | Upload | String | Rótulo do botão de upload |
cancelLabel | Cancel | String | Rótulo do botão de cancelamento |
invalidSizeMessage | null | String | Mensagem a ser exibida quando o limite de tamanho excede |
invalidFileMessage | null | String | Mensagem a ser exibida quando o arquivo não é aceito |
fileLimitMessage | null | String | Mensagem a ser exibida quando o limite de arquivo ultrapassar |
dragDropSupport | true | Boolean | Especifica dragdrop base de seleção de arquivos a partir de sistema de arquivos, o padrão é verdadeiro e funciona somente em navegadores suportados |
onstart | null | String | Callback do lado do cliente para executar quando o upload começa |
onerror | null | String | Callback para executar se o pedido fileupload falhar |
oncomplete | null | String | Callback do lado do cliente para executar quando upload completar |
disabled | false | Boolean | Desabilita componente quando definido 'true' |
messageTemplate | {name} {size} | String | Modelo de mensagem para usar ao exibir arquivos erros de validação |
previewWidth | 80 | Integer | Largura para visualização de imagens em pixels |
1 - Configurações Iniciais
1.1 - Parâmetro de configuração opcional
<context-param>
<param-name>primefaces.UPLOADER</param-name>
<param-value>auto|native|commons</param-value>
</context-param>
auto: Este é o modo padrão e PrimeFaces tenta detectar o melhor método, verificando o
ambiente de tempo de execução, se JSF tempo de execução é de pelo menos 2,2 Uploader 'native' é selecionada, caso contrário 'commons'.
native: Modo nativo usa servlet 3.x API ara fazer o upload dos arquivos e se JSF tempo de execução, se usar JSF inferior a 2,2 uma exceção será lançada.
commons: Esta opção escolhe 'commons fileupload', independentemente do ambiente, a vantagem desta opção é que ela funciona mesmo em um ambiente Servlet 2.5.
Importante: se você decidiu escolher commons fileupload, requer o seguinte filtro de configuração
em implantações web.
<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>
Note que o nome do servlet deve corresponder ao nome configurado do servlet JSF que é Faces
Servlet neste caso. Alternativamente, você pode fazer uma configuração baseada na url-pattern também.
1.2 - 'Simple' File Upload
Modo de upload de arquivos simples funciona em modo de legado com um arquivo de entrada, cujo valor deve ser uma Instância UploadedFile. Imagens Ajax não são suportados no carregamento...
.xhtml
<h:form enctype="multipart/form-data">
<p:fileUpload value="#{fileBean.file}" mode="simple" />
<p:commandButton value="Submit" ajax="false"/>
</h:form>
.java
import org.primefaces.model.UploadedFile;
public class FileBean {
private UploadedFile file;
//getter-setter
}
import org.primefaces.model.UploadedFile;
public class FileBean {
private UploadedFile file;
//getter-setter
}
1.3 - 'Advanced' File Upload
FileUploadListener é a maneira de acessar os arquivos enviados neste modo, quando um arquivo é carregado fileUploadListener definido é processado com um FileUploadEvent como o parâmetro.
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" />
public class FileBean {
public void handleFileUpload(FileUploadEvent event) {
UploadedFile file = event.getFile();
//application code
}
}
1.4 - Multiplos Uploads
Imagens Múltiplas pode ser ativado usando o atributo 'multiple' para que vários arquivos possam ser selecionados no browser. Imagens Múltiplas não são suportadas em navegadores mais antigos. Note-se que o modo multiplo é para seleção somente, ele não envia todos os arquivos em um pedido. Componente FileUpload sempre usa um novo pedido para cada arquivo.
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" multiple="true" />
1.5 Auto Upload
Comportamento padrão exige que os usuários desencadear o processo de upload, você pode alterar essa forma, configurando auto de 'true' para 'false'. Auto = true, os envios são acionados assim que os arquivos são selecionados a partir do diálogo.
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" auto="true" />
1.6 - Atualização/update parcial de página
Após o processo de fileUpload completa você pode usar o PrimeFaces PPR para atualizar qualquer componente na página. FileUpload está equipado com o atributo de atualização para esta finalidade. Seguindo o exemplo exibe uma mensagem "arquivo enviado" utilizando o componente 'growl' após o upload de arquivos.
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" update="msg" />
<p:growl id="msg" />
public class FileBean {
public void handleFileUpload(FileUploadEvent event) {
//add facesmessage to display with growl
//application code
}
}
1.7 - Filtros de Arquivo
Os usuários podem ser restrito a apenas selecionar os tipos de arquivo que você configurou, o exemplo abaixo demonstra como aceitar apenas imagens.
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
1.8 - Limite de tamanho
Na maioria das vezes pode ser necessário restringir o tamanho de upload de arquivos para um arquivo, isso é tão simples como exemplo a configuração sizeLimit, após fileUpload limita o tamanho de 1000 bytes para cada arquivo.
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" sizeLimit="1000" />
1.9 - Limite de arquivo
FileLimit restringe o número de arquivos máximas que podem ser carregados.
<p:fileUpload fileUploadListener="#{fileBean.handleFileUpload}" fileLimit="3" />
2.0 - Validation Messages
opções invalidFileMessage, invalidSizeMessage e fileLimitMessage são fornecidos para exibir
mensagens de validação para os usuários. Similar à API mensagem FacesMessage, essas mensagens definir a parte resumo, a parte detalhe é recuperada a partir da opção messageTemplate onde o valor padrão é "{name} {size}".
2.1 - Skinning
FileUpload reside em um elemento de estilo e opções styleClass, como classes de estilo são globais. Seguindo a lista de classes de estilo estruturais.
Class | aplica |
---|---|
.ui-fileupload | Elemento container principal |
.fileupload-buttonbar | Botões de Barra |
.fileinput-button | Botão Procurar |
.ui-fileupload start | Botão de upload |
.ui-fileupload cancel | Botão cancelar |
fileupload-content | recipiente/corpo de conteúdo |
2.2 - Configuração do filtro
Configuração do filtro é necessário se você estiver usando commons carregou a imagem só. Duas opções de configuração existir, o tamanho limite de upload de arquivo e localização temporária.
Nome do parâmetro | Descrição |
---|---|
thresholdSize | O tamanho máximo do arquivo em bytes para manter os arquivos carregados na memória. Se um ficheiro exceder esse limite, ele vai ser temporariamente gravados no disco. |
uploadDirectory | Caminho do repositório de disco para manter arquivos temporários que excede o tamanho limite. Por padrão, ele é System.getProperty ("java.io.tmpdir") |
Um exemplo de configuração abaixo thresholdSize definida para ser 50kb e uploads para pasta de usuários temporários.
<filter>
<filter-name>PrimeFaces FileUpload Filter</filter-name>
<filter-class>org.primefaces.webapp.filter.FileUploadFilter</filter-class>
<init-param>
<param-name>thresholdSize</param-name>
<param-value>51200</param-value>
</init-param>
<init-param>
<param-name>uploadDirectory</param-name>
<param-value>/Users/primefaces/temp</param-value>
</init-param>
</filter>
Note-se que uploadDirectory é usado internamente, você sempre precisa para implementar a lógica para salvar o arquivo conteúdos si mesmo em seu bean de apoio.
0 comentários :
Postar um comentário
Observação: somente um membro deste blog pode postar um comentário.