Wie kann ich den MIME-Typ einer Datei vor dem Hochladen mit JavaScript überprüfen?

Wie prüfe ich den MIME-Typ einer Datei vor dem Hochladen mit JavaScript?

Im digitalen Zeitalter ist das Hochladen von Dateien zu einem grundlegenden Aspekt von Webanwendungen geworden. Es ist von entscheidender Bedeutung, den MIME-Typ der hochgeladenen Dateien zu überprüfen, um sicherzustellen, dass sie den Erwartungen des Servers entsprechen und unnötige Ressourcenverschwendung zu vermeiden.

Trotz anfänglicher Skepsis ermöglicht uns JavaScript, die MIME-Typen von Dateien auf der Clientseite problemlos zu überprüfen. Dieser Artikel befasst sich mit den Anleitungen, ausgestattet mit einer praktischen Demonstration und einer umfassenden Liste weit verbreiteter Dateisignaturen.

Die Bühne bereiten

Bevor wir uns mit den technischen Details befassen, gehen wir zunächst darauf ein eine Stiftung gründen. Datei- und Blob-APIs sind für die Dateibearbeitung in JavaScript unverzichtbar. Glücklicherweise genießen diese APIs breite Unterstützung in allen gängigen Browsern.

Schritt 1: Dateiinformationen extrahieren

Um Informationen über ausgewählte Dateien abzurufen, können wir Eingabeelemente nutzen:

var input = document.getElementById("file-input");

input.addEventListener("change", function(e) {
  var files = e.target.files;
  
  // Iterate through the files
  for (var i = 0; i < files.length; i++) {
    console.log("Filename: " + files[i].name);
    console.log("Type: " + files[i].type);
    console.log("Size: " + files[i].size + " bytes");
  }
});

Schritt 2: MIME-Typ bestimmen

Es gibt zwei Ansätze, den MIME zu bestimmen Typ:

• Schnellmethode: Das JavaScript-Blob-Objekt stellt von Natur aus eine MIME-Typ-Eigenschaft bereit:

var blob = files[i]; // File from Step 1
console.log(blob.type);

• Header Inspektionsmethode: Für einen zuverlässigeren Ansatz können wir die Datei überprüfen Header:

var blob = files[i]; // File from Step 1
var fileReader = new FileReader();

fileReader.onloadend = function(e) {
  var header = "";
  
  // Extract the first four bytes of the file
  var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
  for (var i = 0; i < arr.length; i++) {
    header += arr[i].toString(16);
  }
  
  console.log(header);
};

fileReader.readAsArrayBuffer(blob);

Als nächstes müssen wir den erhaltenen Header mit bekannten Dateisignaturen abgleichen, um den MIME-Typ zu bestimmen.

Gemeinsame Dateisignaturen

File Type	Signature (hexadecimal)
PNG	89504e47
GIF	47494638
JPEG	ffd8ffe0, ffd8ffe1, ffd8ffe2

Sobald der MIME-Typ identifiziert ist, können wir den Datei-Upload basierend auf vordefinierten Kriterien akzeptieren oder ablehnen.

Demo Showcase

Um die besprochenen Konzepte zu veranschaulichen, hier eine funktionierende Demo:

// Get file header
function getFileHeader(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onloadend = function(e) {
    var arr = (new Uint8Array(e.target.result)).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    callback(header);
  };
  fileReader.readAsArrayBuffer(blob);
}

// Determine MIME type
function getMimeType(header) {
  switch (header) {
    case "89504e47":
      return "image/png";
    case "47494638":
      return "image/gif";
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      return "image/jpeg";
    default:
      return "unknown";
  }
}

// Handle file selection
document.getElementById("file-input").addEventListener("change", function(e) {
  var file = e.target.files[0];
  getFileHeader(file, function(header) {
    var mimeType = getMimeType(header);
    console.log("File: " + file.name);
    console.log("MIME Type: " + mimeType);
  });
});

Vorteile der clientseitigen MIME-Typprüfung

1. Reduzierte Serverlast : Eliminiert unnötige Serveranfragen für ungültig Dateien.
2. Verbesserte Benutzererfahrung: Verhindert frustrierende Fehlermeldungen und Verzögerungen, die durch das Hochladen inkompatibler Dateien verursacht werden.
3. Robuste Dateivalidierung: Stellt sicher, dass Dateien eingehalten werden Servererwartungen, wodurch Sicherheit und Integrität minimiert werden Risiken.

Fazit

JavaScript bietet ein wirksames Mittel zur Überprüfung von Datei-MIME-Typen auf der Clientseite und ergänzt die serverseitige Validierung. Durch die Nutzung der Datei- und Blob-APIs können Entwickler den MIME-Typ einer Datei effizient bestimmen und so die Sicherheit, Effizienz und Benutzererfahrung ihrer Webanwendungen verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich den MIME-Typ einer Datei vor dem Hochladen mit JavaScript überprüfen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!