--Environnement - CentOS Linux release 7.8.2003 (Core) - Eclipse IDE for Enterprise Java Developers.Version: 2020-03 (4.15.0) - openjdk version "11.0.7" 2020-04-14 LTS - JSF 2.3.9
Extraire le nom et la taille de l'interface de fichier et vérifier
L'objet File est un type spécial d'objet Blob qui peut être utilisé partout où Blob est disponible. File - Web API | MDN
upload.js
/**
*Déterminez si l'extension est correcte.
* @param {string}nom de fichier.
* @return {Boolean} true:correct.
*/
function isCorrectExtension(name) {
//Commençant par un caractère autre qu'un espace, ".jpg」「.png」「.gif」「.Caractères se terminant par "psf"(Insensible au cas[i])
var format = new RegExp('([^\s]+(\\.(jpg|png|gif|pdf))$)', 'i');
return format.test(name);
}
Caractère spécial | sens |
---|---|
^ | Correspond au début de l'entrée |
$ | Correspondance à la fin de l'entrée |
\s | Correspond aux caractères d'espace blanc, y compris les espaces, les tabulations, les sauts de page et les sauts de ligne |
--Référence
upload.js
/**
*Déterminez si la taille du fichier est correcte.
* @param {number}taille du fichier(Unité d'octet).
* @return {Boolean} true:correct.
*/
function isCorrectSize(size) {
/** @type {number}Taille maximale autorisée(1MB). */
var maxSize = 1024 * 1024;
return size <= maxSize;
}
--Référence: Conversion d'octets - Site de calcul haute précision
Trois méthodes que j'ai imaginées pour que je puisse l'utiliser en fonction de la situation
window.opener
dans le traitement JavaScript de l'écran enfant--Référence
Écran parent
...réduction...
<h:inputHidden id="extErrMessage" value="Les extensions sont hors de portée." />
<h:inputHidden id="sizeErrMessage" value="La taille du fichier est trop grande." />
...réduction...
upload.js
...réduction...
if (!isCorrectExtension(file.name)) {
errMessage += window.opener.$('#extErrMessage').text();
}
if (!isCorrectSize(file.size)) {
if (errMessage != '') {
errMessage += '<br />';
}
errMessage += window.opener.$('#sizeErrMessage').text();
}
...réduction...
f: viewParam
et définissez-le comme bean de support.parseJSON
dans JavaScriptÉcran parent
...réduction...
<input type="button" value="télécharger" onclick="#{uploadBean.onClick}" />
...réduction...
UploadBean.java
/**
*Obtenir le code JavaScript à afficher pour l'attribut onClick.
* @retourner le code JavaScript.
*/
public String getOnClick() {
StringBuilder builder = new StringBuilder();
builder.append("window.open('upload.jsf");
builder.append("?key=");
builder.append(urlEncode("formId:file"));
builder.append("&extErrMessage=");
builder.append(urlEncode("Les extensions sont hors de portée."));
builder.append("&sizeErrMessage=");
builder.append(urlEncode("La taille du fichier est trop grande."));
builder.append("', '', 'width=500,height=100'); return false;");
return builder.toString();
}
/**
*URL encoder et renvoyer l'organisation.
* @param org
* @return
*/
private String urlEncode(String org) {
try {
return URLEncoder.encode(org, "utf-8");
} catch (UnsupportedEncodingException e) {
throw new RuntimeException(e);
}
}
upload.xml(Écran enfant)
...réduction...
<f:metadata>
<ui:remove>Recevoir les paramètres GET</ui:remove>
<f:viewParam name="key" value="#{uploadBean.key}"/>
<f:viewParam name="extErrMessage" value="#{uploadBean.extErrMessage}" />
<f:viewParam name="sizeErrMessage" value="#{uploadBean.sizeErrMessage}" />
</f:metadata>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h:outputScript library="js" name="upload.js"/>
<ui:remove>Mettez le message d'erreur au format JSON</ui:remove>
<script id="errMessage" type="application/json">
{"ext" : "#{uploadBean.extErrMessage}", "size" : "#{uploadBean.sizeErrMessage}"}
</script>
...réduction...
upload.js
...réduction...
/** @type {array}Message d'erreur placé dans la balise head. */
var message = $.parseJSON($('#errMessage').html());
/** @type {object}Fichier sélectionné. */
var file = inputFile.files[0];
if (!isCorrectExtension(file.name)) {
errMessage += message.ext;
}
if (!isCorrectSize(file.size)) {
if (errMessage != '') {
errMessage += '<br />';
}
errMessage += message.size;
}
...réduction...
UploadBean.java
...réduction...
/**
*Obtenez le message d'erreur lorsqu'une erreur se produit dans l'extension.
* @renvoyer un message d'erreur.
*/
public String getExtErrMessage() {
return "Les extensions sont hors de portée.";
}
/**
*Obtenez le message d'erreur lorsqu'une erreur de taille se produit.
* @renvoyer un message d'erreur.
*/
public String getSizeErrMessage() {
return "La taille du fichier est trop grande.";
}
...réduction...
upload.xml(Écran enfant)
<ui:remove>Mettez le message d'erreur au format JSON</ui:remove>
<script id="errMessage" type="application/json">
{"ext" : "#{uploadBean.extErrMessage}", "size" : "#{uploadBean.sizeErrMessage}"}
</script>
Écran parent
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:composition template="template.xhtml">
<ui:define name="js">
<h:outputScript library="js" name="upload.js"/>
</ui:define>
<ui:define name="content">
<h3>Vérifiez l'entrée du fichier</h3>
<h:form id="formId">
<div id="uploadArea">
<ui:fragment rendered="#{!uploadBean.upload}">
<h:button value="télécharger" onclick="showPopup();"/>
<h:inputText id="file" style="display:none;">
<f:ajax event="change" execute="@form" render="@form" listener="#{uploadBean.uploadFile}" />
</h:inputText>
</ui:fragment>
<ui:fragment rendered="#{uploadBean.upload}">
<h:outputText value="#{uploadBean.file.name}" />
<h:commandButton value="Effacer">
<f:ajax execute="@form" render="@form" listener="#{uploadBean.deleteFile}" />
</h:commandButton>
</ui:fragment>
<div><h:message for="uploadArea" errorClass="error" warnClass="warn" infoClass="info" /></div>
</div>
</h:form>
</ui:define>
</ui:composition>
</html>
upload.xhtml(Écran enfant)
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Fichier à télécharger</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<h:outputScript library="js" name="upload.js"/>
<ui:remove>Mettez le message d'erreur au format JSON</ui:remove>
<script id="errMessage" type="application/json">
{"ext" : "#{uploadBean.extErrMessage}", "size" : "#{uploadBean.sizeErrMessage}"}
</script>
</h:head>
<body>
<div>
<h:inputFile id="inputFile" onchange="checkFile(this)" value="uploadBean.file" />
</div>
<div>
<h:button value="OK" onclick="submit('#{uploadBean.key}');" />
<h:button value="Fermer" onclick="window.close();" />
</div>
</body>
</html>
upload.js
/**Afficher un écran contextuel. */
function showPopup() {
window.open('upload.jsf', '', 'width=500,height=100');
}
/**
*Vérifier les fichiers téléchargés.
* @param {Object}Objet fichier.
*/
function checkFile(inputFile) {
//Supprimer le message d'erreur.
$('.errMessage').remove();
/** @type {String}Message d'erreur à afficher. */
var errMessage = '';
if (inputFile.files && inputFile.files[0]) {
/** @type {array}Message d'erreur placé dans la balise head. */
var message = $.parseJSON($('#errMessage').html());
/** @type {object}Fichier sélectionné. */
var file = inputFile.files[0];
if (!isCorrectExtension(file.name)) {
errMessage += message.ext;
}
if (!isCorrectSize(file.size)) {
if (errMessage != '') {
errMessage += '<br />';
}
errMessage += message.size;
}
}
if (errMessage != '') {
//Ajouter un message d'erreur.
$('#inputFile').after('<br /><span class="errMessage" style="color: red;">' + errMessage + '</span>');
//Supprimer le fichier.
inputFile.value = null;
}
}
/**
*Déterminez si l'extension est correcte.
* @param {string}nom de fichier.
* @return {Boolean} true:correct.
*/
function isCorrectExtension(name) {
var format = new RegExp('([^\s]+(\\.(jpg|png|gif|pdf))$)', 'i');
return format.test(name);
}
/**
*Déterminez si la taille du fichier est correcte.
* @param {number}taille du fichier(Unité d'octet).
* @return {Boolean} true:correct.
*/
function isCorrectSize(size) {
/** @type {number}Taille maximale autorisée(1MB). */
var maxSize = 1024 * 1024;
return size <= maxSize;
}
/**
*Mettez à jour les éléments de l'écran principal et fermez l'écran.
* @param {string}ID de clé de l'élément d'écran parent à mettre à jour.
*/
function submit(key) {
window.opener.$('#'+key.replace(/:/g,"\\:")).change();
window.close();
}
UploadBean.java
package brans;
import java.io.IOException;
import java.io.Serializable;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import javax.servlet.http.Part;
import lombok.Data;
@Named
@ViewScoped
@Data
public class UploadBean implements Serializable {
/** serialVersionUID. */
private static final long serialVersionUID = -355651229394801584L;
/**Données de fichier. */
private Part file;
/**
*Déterminez si le fichier a été téléchargé.
* @return true:Ont été téléchargés.
*/
public boolean isUpload() {
return this.file != null;
}
/**
*Obtenez le message d'erreur lorsqu'une erreur se produit dans l'extension.
* @renvoyer un message d'erreur.
*/
public String getExtErrMessage() {
return "Les extensions sont hors de portée.";
}
/**
*Obtenez le message d'erreur lorsqu'une erreur de taille se produit.
* @renvoyer un message d'erreur.
*/
public String getSizeErrMessage() {
return "La taille du fichier est trop grande.";
}
public String getKey() {
return "formId:file";
}
public void uploadFile() throws IOException {
if (!isUpload()) {
return;
}
if (!isCorrectExtension(this.file.getName())) {
deleteFile();
}
if (!isCorrectSize(this.file.getSize())) {
deleteFile();
}
}
/**
*Supprimer le fichier téléchargé.
* @jette une erreur IOException s'est produite.
*/
public void deleteFile() throws IOException {
this.file.delete();
}
/**
*Déterminez si l'extension est correcte.
* @nom du paramètre Nom du fichier.
* @return true:correct.
*/
private boolean isCorrectExtension(String name) {
if (name != null) {
return name.matches("([^\\s]+(\\.(?i)(jpg|png|gif|pdf))$)");
}
return true;
}
/**
*Déterminez si la taille du fichier est correcte.
* @taille du fichier param size(Travail à temps partiel).
* @return true:correct.
*/
private boolean isCorrectSize(long size) {
long maxSize = 1024 * 1024;
return size <= maxSize;
}
}