[JAVA] Comment vérifier l'extension et la taille des fichiers téléchargés

--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

Chose que tu veux faire

1. Je souhaite faire une erreur si l'extension du fichier téléchargé n'est pas celle spécifiée
2. Je souhaite faire une erreur si la taille du fichier téléchargé est supérieure à celle spécifiée
3. Je souhaite spécifier le message d'erreur sur l'écran parent

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

Je veux faire une erreur si l'extension de fichier n'est pas celle spécifiée

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);
}

--Référence

• Comment vérifier l'extension d'un fichier image avec une expression régulière
• Expression régulière --JavaScript | MDN
• Expression régulière (RegExp) -Introduction au WWW de Tohoho
• À propos de l'échappement des expressions régulières en Javascript --Qiita

Je souhaite faire une erreur si la taille du fichier est supérieure à celle spécifiée

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

Je souhaite spécifier le message d'erreur sur l'écran parent

Trois méthodes que j'ai imaginées pour que je puisse l'utiliser en fonction de la situation

Méthode 1. Obtenez de l'écran principal avec window.opener de JavaScript

1. Définissez le message d'erreur comme élément masqué sur l'écran principal
2. Utilisez window.opener dans le traitement JavaScript de l'écran enfant

--Référence

• Fonctionnement de la fenêtre parente depuis la fenêtre enfant | Notes diverses privées
• [JavaScript] Reportez-vous à la fenêtre parente depuis la sous-fenêtre (window.opener) | Référence inverse JavaScript qui peut être utilisée avec copier-coller

É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...

Méthode 2. Passer un message comme paramètre lors de l'affichage d'un écran enfant

1. Définissez le message d'erreur avec le paramètre GET lors de la génération de JavaSctipt qui affiche l'écran enfant sur l'écran parent.
2. Après avoir ouvert l'écran enfant, recevez le paramètre avec f: viewParam et définissez-le comme bean de support.
3. Mettez le message d'erreur du bean de sauvegarde au format JSON
4. Obtenez le message d'erreur en utilisant 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...

Méthode 3. Utilisez le même bean de support sur l'écran parent-enfant

1. Implémentez le traitement d'acquisition des messages d'erreur dans un backing bean commun sur les écrans parent et enfant
2. Le reste est le même qu'après "Mettre le message d'erreur du bean de support au format JSON" dans "Méthode 2. Passer le message par paramètre lors de l'affichage de l'écran enfant".

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>

Mise en œuvre complète

É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;
    }
}