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

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

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

Recommended Posts

Comment vérifier l'extension et la taille des fichiers téléchargés
Commande pour vérifier le nombre et l'état des threads Java
[Rails] Comment obtenir l'URL de la source de transition et la rediriger
[Swift5] Comment obtenir un tableau et un ensemble de différences entre les tableaux
Comment définir l'adresse IP et le nom d'hôte de CentOS8
Comment vérifier le contenu de la chaîne de caractères java de longueur fixe
[Java] Comment sortir et écrire des fichiers!
Comment déterminer le nombre de parallèles
Comment trier une liste de SelectItems
Comment trouver les dizaines et les unités
Emplacement de la définition de la méthode Résumé de la vérification Lorsque défini dans le projet et Rails / Gem
Comment modifier le nombre maximum et maximum de données POST dans Spark
[Cas d'amélioration Java] Comment atteindre la limite de l'auto-apprentissage et au-delà
Développement Android, comment vérifier null dans la valeur de l'objet JSON
Promesse JDBC et exemple d'écriture
Comment trouver la cause de l'erreur Ruby
Vérifiez la version de JDK installée et la version de JDK activée
Comment vérifier le journal dans le conteneur Docker
Personnalisez la répartition du contenu de Recyclerview
Comment obtenir le jour d'aujourd'hui
Sortie de la façon d'utiliser la méthode slice
Comment afficher le résultat du remplissage du formulaire
Comment trouver le score total et le score moyen
Comment créer des outils de parquet et fusionner des fichiers Parquet
Comment vérifier les commandes Rails dans le terminal
Comment vérifier la dernière version de io.spring.platform pour l'écriture dans pom.xml de Spring (STS)
Différence entre Java, C # et JavaScript (comment trouver le degré d'obésité)
[Java] Comment obtenir l'URL de la source de transition
Comment supprimer / mettre à jour le champ de liste de OneToMany
Comment écrire Scala du point de vue de Java
Convertit le tableau d'erreurs.full_messages en caractères et sortie
[Java] Comment obtenir la valeur maximale de HashMap
[Rails] Comment changer le nom de colonne de la table
[Android] Comment obtenir la langue de réglage du terminal
Comment gérer les fichiers TSV et les fichiers CSV dans Ruby
[Rails] Comment obtenir le contenu des paramètres forts
Comment juger le clic de n'importe quelle zone de l'image
Comment télécharger une ancienne version d'Apache Tomcat
[Swift] Comment obtenir l'ID de document Firebase
[Linux] Commentaire facile! Comment vérifier et modifier les autorisations
Si vous utilisez SQLite avec VSCode, utilisez l'extension (comment voir le fichier binaire de sqlite3)
Tu comprends vraiment? Comment vérifier la bibliothèque et la licence utilisées par l'application
Comment utiliser UsageStatsManager dans Android Studio (Comment vérifier l'heure de démarrage d'autres applications)
Comment définir une limite de relance pour sidekiq et notifier les files d'attente mortes avec Slack
[Explication approximative] Comment séparer le fonctionnement de l'environnement de production et de l'environnement de développement avec Rails
[Swift5] Comment analyser un JSON complexe et obtenir l'index de l'élément qui satisfait la condition
Comment afficher le champ de sélection de time_select toutes les 30 minutes
Comment gérer les images téléchargées