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

mysql installer web community 5.7.21.0.msi grafik-tutorial zur installation

In diesem Artikelbeispiel wird der spezifische Co...

Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Als ich kürzlich Apple.com/Ebay.com/Amazon.com/sh...

So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten

<br />Einige Webseiten sehen nicht groß aus,...

Eine kurze Analyse der Unterschiede zwischen px, rem, em, vh und vw in CSS

Absolute Länge px px ist der Pixelwert, also eine...

Implementierung des iview-Berechtigungsmanagements

Inhaltsverzeichnis iview-admin2.0 integrierte Ber...

Tipps zum Implementieren mehrerer Rahmen in CSS

1. Mehrere Grenzen[1] Hintergrund: Box-Shadow, Um...

Detaillierte Erklärung der Speicher-Engine in MySQL

Übersicht über die MySQL-Speicher-Engine Was ist ...

Docker-Image-Analysetool - Analyse des Tauchprinzips

Heute empfehle ich ein solches Open-Source-Tool z...

So implementieren Sie Leerzeichen in Taobao mit CSS3

Machen Sie einen leeren Bereich für Taobao: Wenn ...

Linux verwendet stty zum Anzeigen und Ändern von Terminalzeileneinstellungen

Sttty ist ein gängiger Befehl zum Ändern und Druc...

Detaillierte Erklärung des JavaScript-Statuscontainers Redux

Inhaltsverzeichnis 1. Warum Redux 2. Redux-Datenf...