[JAVA] So überprüfen Sie die Erweiterung und Größe der hochgeladenen Dateien

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

Was du machen willst

1. Ich möchte einen Fehler machen, wenn die Erweiterung der hochgeladenen Datei nicht der angegebenen entspricht
2. Ich möchte einen Fehler machen, wenn die Größe der hochgeladenen Datei größer als angegeben ist
3. Ich möchte die Fehlermeldung auf dem übergeordneten Bildschirm angeben

Name und Größe aus der Dateischnittstelle extrahieren und überprüfen

Das Dateiobjekt ist eine spezielle Art von Blob-Objekt, das überall dort verwendet werden kann, wo Blob verfügbar ist. File - Web API | MDN

Ich möchte einen Fehler machen, wenn die Dateierweiterung nicht die angegebene ist

upload.js

/**
 *Stellen Sie fest, ob die Erweiterung korrekt ist.
 * @param  {string}Dateiname.
 * @return {Boolean} true:richtig.
 */
function isCorrectExtension(name) {
    //Beginnend mit einem anderen Zeichen als einem Leerzeichen. ".jpg」「.png」「.gif」「.Zeichen, die mit "psf" enden(Unempfindlich gegen Groß- und Kleinschreibung[i])
    var format = new RegExp('([^\s]+(\\.(jpg|png|gif|pdf))$)', 'i');
    return format.test(name);
}

--Referenz

• So überprüfen Sie die Erweiterung einer Bilddatei mit einem regulären Ausdruck
• Regulärer Ausdruck - JavaScript | MDN
• RegExp) - Einführung in Tohohos WWW
• Über das Entkommen regulärer Ausdrücke in Javascript - Qiita

Ich möchte einen Fehler machen, wenn die Datei größer als angegeben ist

upload.js

/**
 *Stellen Sie fest, ob die Dateigröße korrekt ist.
 * @param  {number}Dateigröße(Byteeinheit).
 * @return {Boolean} true:richtig.
 */
function isCorrectSize(size) {
    /** @type {number}Maximal zulässige Größe(1MB). */
    var maxSize = 1024 * 1024;
    return size <= maxSize;
}

• Referenz: Byte-Konvertierung - Hochpräzise Berechnungsseite

Ich möchte die Fehlermeldung auf dem übergeordneten Bildschirm angeben

Drei Methoden, die ich mir ausgedacht habe, damit ich sie je nach Situation anwenden kann

Methode 1. Rufen Sie mit window.opener von JavaScript den Hauptbildschirm auf

1. Legen Sie die Fehlermeldung im Hauptbildschirm als verstecktes Element fest
2. Verwenden Sie window.opener in der JavaScript-Verarbeitung des untergeordneten Bildschirms

--Referenz

• Bedienen des übergeordneten Fensters über das untergeordnete Fenster | Private sonstige Notizen
• [JavaScript] Verweisen Sie auf das übergeordnete Fenster im Unterfenster (window.opener) | JavaScript-Umkehrreferenz, die beim Kopieren und Einfügen verwendet werden kann

Übergeordneter Bildschirm

...Kürzung...
<h:inputHidden id="extErrMessage" value="Erweiterungen sind außerhalb des Geltungsbereichs." />
<h:inputHidden id="sizeErrMessage" value="Die Dateigröße ist zu groß." />
...Kürzung...

upload.js

...Kürzung...
        if (!isCorrectExtension(file.name)) {
            errMessage += window.opener.$('#extErrMessage').text();
        }
        if (!isCorrectSize(file.size)) {
            if (errMessage != '') {
                errMessage += '<br />';
            }
            errMessage += window.opener.$('#sizeErrMessage').text();
        }
...Kürzung...

Methode 2. Übergeben Sie eine Nachricht als Parameter, wenn Sie einen untergeordneten Bildschirm anzeigen

1. Stellen Sie die Fehlermeldung mit dem Parameter GET ein, wenn Sie JavaSctipt generieren, das den untergeordneten Bildschirm auf dem übergeordneten Bildschirm anzeigt.
2. Empfangen Sie nach dem Öffnen des untergeordneten Bildschirms den Parameter mit f: viewParam und legen Sie ihn als Backing Bean fest.
3. Geben Sie die Backing Bean-Fehlermeldung im JSON-Format ein
4. Erhalten Sie die Fehlermeldung mit parseJSON in JavaScript

Übergeordneter Bildschirm

...Kürzung...
<input type="button" value="hochladen" onclick="#{uploadBean.onClick}" />
...Kürzung...

UploadBean.java

    /**
     *Rufen Sie den JavaScript-Code ab, der für das onClick-Attribut ausgegeben werden soll.
     * @JavaScript-Code zurückgeben.
     */
    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("Erweiterungen sind außerhalb des Geltungsbereichs."));
        builder.append("&sizeErrMessage=");
        builder.append(urlEncode("Die Dateigröße ist zu groß."));
        builder.append("', '', 'width=500,height=100'); return false;");
        return builder.toString();
    }

    /**
     *URL codieren und org zurückgeben.
     * @param org
     * @return
     */
    private String urlEncode(String org) {
        try {
            return URLEncoder.encode(org, "utf-8");
        } catch (UnsupportedEncodingException e) {
            throw new RuntimeException(e);
        }
    }

upload.xml(Untergeordneter Bildschirm)

...Kürzung...
  <f:metadata>
    <ui:remove>Empfangen Sie GET-Parameter</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>Stellen Sie die Fehlermeldung in das JSON-Format</ui:remove>
  <script id="errMessage" type="application/json">
    {"ext" : "#{uploadBean.extErrMessage}", "size" : "#{uploadBean.sizeErrMessage}"}
  </script>
...Kürzung...

upload.js

...Kürzung...
        /** @type {array}Fehlermeldung in der Kopfmarke platziert. */
        var message = $.parseJSON($('#errMessage').html());
        /** @type {object}Ausgewählte Datei. */
        var file = inputFile.files[0];
        if (!isCorrectExtension(file.name)) {
            errMessage += message.ext;
        }
        if (!isCorrectSize(file.size)) {
            if (errMessage != '') {
                errMessage += '<br />';
            }
            errMessage += message.size;
        }
...Kürzung...

Methode 3. Verwenden Sie dieselbe Backing Bean auf dem Eltern-Kind-Bildschirm

1. Implementieren Sie die Verarbeitung zur Erfassung von Fehlermeldungen in einer allgemeinen Backing Bean auf dem übergeordneten und dem untergeordneten Bildschirm
2. Der Rest ist derselbe wie nach "Setzen der Backing-Bean-Fehlermeldung im JSON-Format" in "Methode 2. Übergeben Sie die Nachricht als Parameter, wenn der untergeordnete Bildschirm angezeigt wird".

UploadBean.java

...Kürzung...
    /**
     *Erhalten Sie die Fehlermeldung, wenn ein Fehler in der Erweiterung auftritt.
     * @Fehlermeldung zurückgeben.
     */
    public String getExtErrMessage() {
        return "Erweiterungen sind außerhalb des Geltungsbereichs.";
    }

    /**
     *Erhalten Sie die Fehlermeldung, wenn ein Fehler in der Größe auftritt.
     * @Fehlermeldung zurückgeben.
     */
    public String getSizeErrMessage() {
        return "Die Dateigröße ist zu groß.";
    }
...Kürzung...

upload.xml(Untergeordneter Bildschirm)

  <ui:remove>Stellen Sie die Fehlermeldung in das JSON-Format</ui:remove>
  <script id="errMessage" type="application/json">
    {"ext" : "#{uploadBean.extErrMessage}", "size" : "#{uploadBean.sizeErrMessage}"}
  </script>

Ganze Umsetzung

Übergeordneter Bildschirm

<?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>Überprüfen Sie die Eingabe der Datei</h3>
  <h:form id="formId">
    <div id="uploadArea">
      <ui:fragment rendered="#{!uploadBean.upload}">
        <h:button value="hochladen" 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="Löschen">
          <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(Untergeordneter Bildschirm)

<?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>Datei zum Hochladen</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <h:outputScript library="js" name="upload.js"/>
  <ui:remove>Stellen Sie die Fehlermeldung in das JSON-Format</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="schließen" onclick="window.close();" />
  </div>
</body>
</html>

upload.js

/**Zeigen Sie einen Popup-Bildschirm an. */
function showPopup() {
    window.open('upload.jsf', '', 'width=500,height=100');
}
/**
 *Überprüfen Sie die hochgeladenen Dateien.
 * @param {Object}Dateiobjekt.
 */
function checkFile(inputFile) {
    //Löschen Sie die Fehlermeldung.
    $('.errMessage').remove();
    /** @type {String}Fehlermeldung angezeigt werden. */
    var errMessage = '';
    if (inputFile.files && inputFile.files[0]) {
        /** @type {array}Fehlermeldung in der Kopfmarke platziert. */
        var message = $.parseJSON($('#errMessage').html());
        /** @type {object}Ausgewählte Datei. */
        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 != '') {
        //Fügen Sie eine Fehlermeldung hinzu.
        $('#inputFile').after('<br /><span class="errMessage" style="color: red;">' + errMessage + '</span>');
        //Datei löschen.
        inputFile.value = null;
    }
}

/**
 *Stellen Sie fest, ob die Erweiterung korrekt ist.
 * @param  {string}Dateiname.
 * @return {Boolean} true:richtig.
 */
function isCorrectExtension(name) {
    var format = new RegExp('([^\s]+(\\.(jpg|png|gif|pdf))$)', 'i');
    return format.test(name);
}

/**
 *Stellen Sie fest, ob die Dateigröße korrekt ist.
 * @param  {number}Dateigröße(Byteeinheit).
 * @return {Boolean} true:richtig.
 */
function isCorrectSize(size) {
    /** @type {number}Maximal zulässige Größe(1MB). */
    var maxSize = 1024 * 1024;
    return size <= maxSize;
}

/**
 *Aktualisieren Sie die Elemente des Hauptbildschirms und schließen Sie den Bildschirm.
 * @param  {string}Schlüssel-ID des zu aktualisierenden übergeordneten Bildschirmelements.
 */
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;
    /**Dateidaten. */
    private Part file;

    /**
     *Stellen Sie fest, ob die Datei hochgeladen wurde.
     * @return true:Wurden hochgeladen.
     */
    public boolean isUpload() {
        return this.file != null;
    }

    /**
     *Erhalten Sie die Fehlermeldung, wenn ein Fehler in der Erweiterung auftritt.
     * @Fehlermeldung zurückgeben.
     */
    public String getExtErrMessage() {
        return "Erweiterungen sind außerhalb des Geltungsbereichs.";
    }

    /**
     *Erhalten Sie die Fehlermeldung, wenn ein Fehler in der Größe auftritt.
     * @Fehlermeldung zurückgeben.
     */
    public String getSizeErrMessage() {
        return "Die Dateigröße ist zu groß.";
    }

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

    /**
     *Löschen Sie die hochgeladene Datei.
     * @löst einen IOException-Fehler aus.
     */
    public void deleteFile() throws IOException {
        this.file.delete();
    }

    /**
     *Stellen Sie fest, ob die Erweiterung korrekt ist.
     * @Parametername Dateiname.
     * @return true:richtig.
     */
    private boolean isCorrectExtension(String name) {
        if (name != null) {
            return name.matches("([^\\s]+(\\.(?i)(jpg|png|gif|pdf))$)");
        }
        return true;
    }

    /**
     *Stellen Sie fest, ob die Dateigröße korrekt ist.
     * @Parametergröße Dateigröße(Teilzeitstelle).
     * @return true:richtig.
     */
    private boolean isCorrectSize(long size) {
        long maxSize = 1024 * 1024;
        return size <= maxSize;
    }
}