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

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

Mit JavaScript können Sie den MIME-Typ einer Datei vor dem Hochladen mit FileReader ermitteln es an einen Server. Obwohl die serverseitige Prüfung bevorzugt wird, ist die clientseitige Prüfung immer noch eine Option. Sehen wir uns an, wie:

Schritt 1: Dateiinformationen abrufen

Dateidetails aus einer -Datei abrufen. Element wie unten gezeigt:

// Retrieve file information
var files = document.getElementById("your-files").files;

Schritt 2: Dateien auf MIME-Typ prüfen

Schnelle Methode:

Verwenden Blob zum Extrahieren des MIME-Typs:

console.log(files[i].type);  // Outputs "image/jpeg" or similar

Proper Methode zur Header-Inspektion:

Analysieren Sie den Datei-Header auf „magische Zahlen“, die für verschiedene Dateitypen spezifisch sind:

var blob = files[i];  // File object
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);
  }
  console.log(header);

  // Check the file signature against known types

};
fileReader.readAsArrayBuffer(blob);

Bestimmung des echten MIME-Typs:

switch (header) {
    case "89504e47":
        type = "image/png";
        break;
    case "47494638":
        type = "image/gif";
        break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
    case "ffd8ffe3":
    case "ffd8ffe8":
        type = "image/jpeg";
        break;
    default:
        type = "unknown";
        break;
}

Durch die Verwendung dieser Methoden können Sie den MIME-Typ von Dateien auf der Clientseite bestimmen, bevor Sie sie auf die hochladen Server, wodurch unnötige Serverressourcennutzung reduziert wird.

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