Detaillierte Erläuterung des Falls des JavaScript-Upload-Dateilimitparameters

Detaillierte Erläuterung des Falls des JavaScript-Upload-Dateilimitparameters

Projektszenario:

1. Einschränkungen beim Hochladen von Dateien

Funktion:

1. Verhindern Sie, dass Front-End-Operationen abnormale Dateien hochladen
2. Begrenzen Sie die Regeln, die den Anforderungen entsprechen, und optimieren Sie das Anzeigemodell

Funktionalität:

1. Holen Sie sich die Dateiinstanz
2. Methode zur Ausführung der Überprüfungsregel

Der Code lautet wie folgt:

//Größenbeschränkung checkFileSize(Datei, Regeln) {
    returniere neues Promise((lösen, ablehnen) => {
        Dateigröße / 1024 / 1024 > Regeln ? reject() : resolve()
    }).Dann(
        () => {
          returniere wahr
        },
        () => {
			//Operationsaufforderung return Promise.reject()
        }
    )
},
//Upload-Formatbeschränkungen checkFileType(file, rules) {
    returniere neues Promise((lösen, ablehnen) => {
        Regeln && Regeln.includes(Datei.Typ) ? lösen() : ablehnen()
    }).Dann(
      () => {
          returniere wahr
      },
      () => {
          //Operationsaufforderung return Promise.reject()
      }
    )
},
//Seitenverhältnis (Bild)
checkImageWH(Datei, Regeln) {
    const _this = dies
    returniere neues Promise((lösen, ablehnen) => {
    	//Datei lesen const filereader = new FileReader()
        filereader.readAsDataURL(Datei)
        filereader.onload = e => {
          const src = e.Ziel.Ergebnis
          const image = neues Bild()
          bild.onload = funktion() {
			//Analysieren Sie die Daten und stellen Sie fest, ob sie den Regeln entsprechen resolve()
		}
          image.onerror = ablehnen
          bild.src = src
        }
    }).Dann(
        () => {
          returniere wahr
        },
        () => {
          //Operationsaufforderung return Promise.reject()
        }
    )
},
//Seitenverhältnis (Video)
checkVideoWH(Datei, Regeln) {
      returniere neues Promise(Funktion(auflösen, ablehnen) {
        var url = URL.createObjectURL(Datei)
        var video = document.createElement('video')
        video.onloadedmetadata = evt => {
          URL.revokeObjectURL(URL)
          //Analysieren Sie die Daten und stellen Sie fest, ob sie den Regeln entsprechen resolve()
        }
        video.src = URL
        video.load() // holt Metadaten
      }).Dann(
        () => {
          returniere wahr
        },
        () => {
          //Operationsaufforderung return Promise.reject()
        }
      )
}

Tatsächlicher Anruf

//Dateiinstanz abrufen Screen(){
	//Berechtigungsregeln abrufen const { filesSize, filesFormat, fileLimit} = this // Dateigröße, Dateityp, Bild-/Videobreiten- und -höhenbeschränkungen //Parameterbeurteilung const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true
    const isFileType = filesFormat ? warte auf this.checkFileType(file, filesFormat) : true
	//Bild materialif (fileLimit && fileLimit.type * 1 === 1) {
      const isImageLimit = DateiLimit? warte auf dies.checkImageWH(Datei, DateiLimit) : true
      //Ausgabeergebnis return isFileSize && isFileType && isImageLimit
    } sonst wenn (Dateilimit&& Dateilimit.Typ * 1 === 2) {
    //Videomaterial const isVideoLimit = fileLimit? warte auf dies.checkVideoWH(file, fileLimit) : true
      //Ausgabeergebnis return isFileSize && isFileType && isVideoLimit
    } anders {
    //Keine Begrenzung //Ausgabeergebnis return isFileSize && isFileType
    }
}

Zusammenfassung:

1. Holen Sie sich eine Instanz
2. Ausführungsmethode.

Dies ist das Ende dieses Artikels über den detaillierten Fall des JavaScript-Upload-Dateibeschränkungsparameters. Weitere relevante Inhalte zu JS-Upload-Dateibeschränkungsparametern finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Allgemeine Array-Operationen in JavaScript
  • Eine einfache und eingehende Studie zu Async und Await in JavaScript
  • JavaScript-Implementierung des klassischen Schlangenspiels
  • Javascript-Grundlagen zu integrierten Objekten
  • Detaillierte Erläuterung des JavaScript-Betriebsmechanismus und eine kurze Diskussion über Event Loop
  • Vergleich zwischen Python-Coroutinen und JavaScript-Coroutinen
  • JavaScript zum Erreichen eines Mouse-Tailing-Effekts
  • JavaScript zum Erzielen eines einfachen Drag-Effekts
  • Detaillierte Erklärung der JavaScript-Array-Deduplizierung
  • JavaScript zur Implementierung des Flugzeugkriegsspiels
  • JavaScript-Lösung für die Setinterval-Verzögerung um eine Sekunde
  • Ein kurzer Vortrag über die Variablenförderung in JavaScript
  • Tiefgreifendes Verständnis des Ereignisausführungsmechanismus von JavaScript
  • 8 wichtige JavaScript-Codefragmente für Ihr Projekt

<<:  Der MySQL-Server läuft mit der Option --read-only und kann diese Anweisung daher nicht ausführen.

>>:  So installieren Sie den Xrdp-Server (Remote Desktop) unter Ubuntu 20.04

Artikel empfehlen

So fügen Sie dem Tomcat-Dienst einen Java-Startbefehl hinzu

Mein erstes Serverprogramm Ich lerne gerade, Onli...

js-Entwicklungs-Plugin zum Erzielen eines Tab-Effekts

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte grafische Erläuterung der MySql5.7.18-Zeichensatzkonfiguration

Hintergrund: Vor langer Zeit (2017.6.5, der Artik...

Konvertieren von XHTML-CSS-Seiten in Druckerseiten

In der Vergangenheit bedeutete das Erstellen eine...

Detaillierte Erklärung des FreeList-Mechanismus von MySQL

1. Einleitung Nach dem Start von MySQL wird Buffe...

Welche Codes sollte ich beherrschen, wenn ich Webdesign lerne?

In diesem Artikel werden einige der Techniken ausf...

Üben Sie die Verwendung von Golang, um mit der Docker-API zu spielen

Inhaltsverzeichnis Installieren des SDK Lokalen D...

Lösung für den Fehler bei der Verbindung mit MySQL in Docker

Szenario: Nach der Installation der neuesten Vers...

MySQL8.0.18-Konfiguration mehrerer Master und eines Slaves

Inhaltsverzeichnis 1. Realistischer Hintergrund 2...

So installieren Sie OpenSuse auf Virtualbox

Die virtuelle Maschine wird auf dem Hostcomputer ...

Eine sehr detaillierte Erklärung der Linux C++ Multi-Thread-Synchronisierung

Inhaltsverzeichnis 1. Mutex 1. Initialisierung de...

HTML-Tipps, um Ihren Code semantisch zu gestalten

HTML-Semantik scheint ein alltägliches Problem zu...

Detaillierte Erklärung von Softlinks und Hardlinks in Linux

Inhaltsverzeichnis 1. Grundlegende Speicherung vo...