JavaScript-Methode zum Erkennen des Dateityps

Wir könnten darüber nachdenken, die hochzuladenden Dateitypen durch das Accept-Attribut des Eingabeelements einzuschränken:

<input Typ="Datei" id="inputFile" accept="image/png" />

Obwohl diese Lösung für die meisten Szenarien geeignet ist, kann diese Einschränkung erfolgreich überwunden werden, wenn der Benutzer das Suffix des Bildes im JPEG-Format in .png ändert. Wie also soll dieses Problem gelöst werden? Tatsächlich können wir den richtigen Dateityp identifizieren, indem wir die Binärdaten der Datei lesen. Bevor Bruder Abao den konkreten Implementierungsplan vorstellt, wird er zunächst die relevanten Kenntnisse am Beispiel von Bilddateien vermitteln.

1. So zeigen Sie die Binärdaten eines Bildes an

Zum Anzeigen der dem Bild entsprechenden Binärdaten können wir einige vorgefertigte Editoren verwenden, z. B. WinHex unter der Windows-Plattform oder den Hexadezimal-Editor Synalyze It! Pro unter der macOS-Plattform. Hier verwenden wir den Editor Synalyze It! Pro, um die dem Avatar von Abao Ge entsprechenden Binärdaten im Hexadezimalformat anzuzeigen.

2. So unterscheiden Sie die Bildtypen

Computer unterscheiden unterschiedliche Bildtypen nicht anhand der Bilderweiterung, sondern anhand der „magischen Zahl“. Bei einigen Dateitypen ist der Inhalt der ersten Bytes festgelegt und anhand des Inhalts dieser Bytes kann der Dateityp bestimmt werden.

Die magischen Zahlen, die den gängigen Bildtypen entsprechen, sind in der folgenden Tabelle aufgeführt:

Verwenden Sie Synalyze It! Pro, um zu überprüfen, ob der Typ von Abaos Avatar (abao.png) korrekt ist:

Wie aus der obigen Abbildung ersichtlich, sind die ersten 8 Bytes eines Bildes vom Typ PNG 0x89 50 4E 47 0D 0A 1A 0A. Nachdem Sie die Datei abao.png in abao.jpeg geändert und dann mit einem Editor den Binärinhalt des Bildes angezeigt haben, werden Sie feststellen, dass die ersten 8 Bytes der Datei unverändert bleiben. Wenn Sie jedoch das Eingabefeld input[type="file"] zum Lesen der Dateiinformationen verwenden, werden die folgenden Ergebnisse ausgegeben:

Der richtige Dateityp lässt sich offensichtlich weder an der Dateiendung noch am MIME-Typ der Datei erkennen. Als Nächstes erklärt Bruder Abao, wie Sie durch Lesen der Binärinformationen des Bildes beim Hochladen den richtigen Bildtyp sicherstellen.

3. So erkennen Sie den Bildtyp

3.1 Definieren Sie die readBuffer-Funktion

Nachdem wir das Dateiobjekt erhalten haben, können wir den Inhalt der Datei über die FileReader-API lesen. Da wir nicht die vollständigen Informationen der Datei lesen müssen, kapselt Abaoge eine readBuffer-Funktion, um die Binärdaten des angegebenen Bereichs in der Datei zu lesen.

Funktion readBuffer(Datei, Start = 0, Ende = 2) {
  returniere neues Promise((lösen, ablehnen) => {
    Konstante Leser = neuer FileReader();
    reader.onload = () => {
      auflösen(Reader.Ergebnis);
    };
    Leser.beiFehler = ablehnen;
    Leser.readAsArrayBuffer(Datei.Slice(Start, Ende));
  });
}

Bei einem Bild vom Typ PNG lauten die ersten 8 Bytes der Datei 0x89 50 4E 47 0D 0A 1A 0A. Wenn wir also feststellen, ob es sich bei der ausgewählten Datei um ein Bild vom Typ PNG handelt, müssen wir nur die ersten 8 Datenbytes lesen und nacheinander feststellen, ob der Inhalt jedes Bytes konsistent ist.

3.2 Definition der Prüffunktion

Um einen byteweisen Vergleich und eine bessere Wiederverwendung zu erreichen, definiert Abaoge eine Prüffunktion:

Funktion check(headers) {
  return (Puffer, Optionen = {Offset: 0}) =>
    Header.jedes(
      (Header, Index) => Header === Puffer[Optionen.Offset + Index]
    );
}

3.3 PNG-Bildtyp erkennen

Basierend auf den oben definierten Funktionen readBuffer und check können wir die Funktion zum Erkennen von PNG-Bildern implementieren:

3.3.1 HTML-Code

<div>
   Datei auswählen: <input type="file" id="inputFile" accept="image/*"
              onchange="handleChange(Ereignis)" />
   <p id="realerDateityp"></p>
</div>

3.3.2 JS-Code

const isPNG = check([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]); // Magische Zahl, die dem PNG-Bild entspricht const realFileElement = document.querySelector("#realFileType");

asynchrone Funktion handleChange(Ereignis) {
  const Datei = Ereignis.Ziel.Dateien[0];
  const Puffer = warte auf Lesepuffer (Datei, 0, 8);
  const uint8Array = neues Uint8Array(Puffer);
  realFileElement.innerText = `${file.name}Der Dateityp ist: ${
    istPNG(uint8Array) ? "image/png" : Dateityp
  }`;
}

Nachdem das obige Beispiel erfolgreich ausgeführt wurde, werden die entsprechenden Erkennungsergebnisse in der folgenden Abbildung angezeigt:

Wie aus der obigen Abbildung ersichtlich, können wir das richtige Bildformat erfolgreich erkennen. Wenn Sie das JPEG-Dateiformat erkennen möchten, müssen Sie nur eine isJPEG-Funktion definieren:

const isJPEG = check([0xff, 0xd8, 0xff])

Was sollten Sie jedoch tun, wenn Sie andere Dateitypen, beispielsweise PDF-Dateien, erkennen möchten? Hier verwenden wir zunächst den Synalyze It! Pro-Editor, um den binären Inhalt der PDF-Datei zu durchsuchen:

Aus der obigen Abbildung können wir erkennen, dass die ersten 4 Bytes der PDF-Datei 0x25 50 44 46 sind und die entsprechende Zeichenfolge %PDF ist. Damit Benutzer den Erkennungstyp intuitiver identifizieren können, definiert Abaoge eine stringToBytes-Funktion:

Funktion stringToBytes(Zeichenfolge) {
  return [...string].map((Zeichen) => Zeichen.charCodeAt(0));
}

Basierend auf der Funktion stringToBytes können wir ganz einfach eine isPDF-Funktion wie folgt definieren:

const isPDF = check(stringToBytes("%PDF"));

Mit der Funktion isPDF können Sie die PDF-Dateierkennungsfunktion implementieren. Bei der tatsächlichen Arbeit treten jedoch unterschiedliche Dateitypen auf. In diesem Fall können Sie eine vorgefertigte Drittanbieterbibliothek verwenden, um die Dateierkennungsfunktion zu implementieren, z. B. die Dateitypbibliothek.

Tatsächlich können wir anhand der Binärdaten der Datei neben der Erkennung des Dateityps auch die dateibezogenen Metadaten lesen, z. B. Bildgröße, Bittiefe, Farbtyp und Komprimierungsalgorithmus. Nehmen wir weiterhin Abaos Avatar (abao.png) als Beispiel, um die tatsächliche Situation zu sehen:

Okay, das ist alles zum Thema „Dateitypen auf dem Front-End erkennen“. Aus Sicherheitsgründen wird in tatsächlichen Projekten bei Datei-Upload-Szenarien empfohlen, die Arten der Datei-Uploads während des Entwicklungsprozesses zu begrenzen. In strengeren Szenarien können Sie die von Abao eingeführte Methode zur Überprüfung des Dateityps verwenden.

Oben finden Sie Einzelheiten dazu, wie JavaScript den Dateityp erkennt. Weitere Informationen dazu, wie JavaScript den Dateityp erkennt, finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!