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

Beispiel für die Verwendung der setInterval-Funktion in React

Dieser Artikel basiert auf der Windows 10-Systemu...

MySQL 8.0.18 Installations-Tutorial unter Windows (Abbildung)

Herunterladen Download-Adresse: https://dev.mysql...

Vue+Openlayer verwendet modify, um den gesamten Code des Elements zu ändern

Vue+Openlayer verwendet „modify“, um Elemente zu ...

JavaScript-Einzelthread und asynchrone Details

Inhaltsverzeichnis 1. Aufgabenwarteschlange 2. Um...

Horizontales Header-Menü mit CSS3 implementiert

Ergebnis:Implementierungscode html <nav class=...

Eingabedatei zur benutzerdefinierten Schaltflächenverschönerung (Demo)

Ich habe schon einmal einen solchen Artikel gesch...

Gestaltung von Popup-Fenstern und schwebenden Ebenen im Webdesign

Im Zuge des schrittweisen Übergangs von herkömmli...

Grundlagen und Beispiele zur TypeScript-Aufzählung

Inhaltsverzeichnis Vorwort Was sind Enumerationen...

6 praktische Tipps für die TypeScript-Entwicklung

Inhaltsverzeichnis 1. Bestimmen Sie den Entitätst...

Detaillierte Erläuterung des mobilen Projekts vite2.0 + vue3

1. Technische Punkte Vite-Version vue3 ts Integri...

Liste der allgemeinen MySql-Abfragebefehlsoperationen

In MySQL häufig verwendete Abfragebefehle: mysql&...

So verwenden Sie ECharts in WeChat Mini-Programmen mit uniapp

Heute verwenden wir Uniapp, um Echarts zur Anzeig...