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

HTML-Framework_Powernode Java Academy

1. Rahmen In einem Browser-Dokumentfenster kann n...

Ein vollständiges Tutorial zur Verwendung der Axios-Kapselung in Vue

Vorwort Heutzutage wird in Projekten häufig die A...

Detaillierte Erläuterung der Komponentenentwicklung des Vue-Dropdown-Menüs

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Einführung in den allgemeinen Prozess der Web-Frontend-Webentwicklung

Ich sehe viele Anfänger in der Front-End-Entwicklu...

Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung

XML-Dateien sollten so weit wie möglich in UTF-8 ...

Erstellen privater Mitglieder in JavaScript

Inhaltsverzeichnis 1. Verwende Closures 2. Verwen...

HTTP-Rückgabecodeliste (Erklärung auf Chinesisch und Englisch)

Liste der HTTP-Rückgabecodes (unten finden Sie ei...

Analyse von 2 Token-Gründen und Beispielcode in der Webprojektentwicklung

Inhaltsverzeichnis Frage: Es gibt 2 Token im Proj...

Ubuntu-Grundeinstellungen: Installation und Nutzung des OpenSSH-Servers

Protokollieren Sie die Installation und Verwendun...