Wie kann ich Datei-MIME-Typen in JavaScript vor dem Hochladen überprüfen?

Wie überprüfe ich den MIME-Typ der Datei mit JavaScript vor dem Hochladen?

Mögliche Lösungen

Obwohl die serverseitige Validierung unerlässlich ist, muss sie clientseitig durchgeführt werden Durch Überprüfungen kann ein unnötiger Verbrauch von Serverressourcen verhindert werden. Obwohl der MIME-Typ häufig anhand der Dateierweiterung bestimmt wird, kann dieser Ansatz unzuverlässig sein. Hier ist ein zweistufiger Prozess, den Sie befolgen können, um MIME-Typen mithilfe von JavaScript vor dem Hochladen zu überprüfen:

Schritt 1: Dateiinformationen abrufen

Dateidetails aus einer -Datei abrufen Element wie unten gezeigt:

var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    var files = control.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");
    }
}, false);

Schritt 2: Dateikopfzeilen prüfen

Verwenden Sie die FileReader-API, um den Dateikopfzeilen zu untersuchen.

1. Schnelle Methode: Rufen Sie den MIME-Typ direkt aus der Datei ab Blob:

   console.log(blob.type);

2. Zuverlässige Methode: Analysieren Sie die Rohdatei-Header-Bytes:

   var fileReader = new FileReader();
   fileReader.onloadend = function(e) {
     // code to obtain file header goes here
   };
   fileReader.readAsArrayBuffer(blob);

Vergleichen Sie die Vergleichen Sie den Header mit bekannten Signaturen, um den tatsächlichen MIME-Typ zu ermitteln. Beispielsweise könnten JPEG-Signaturen sein:

case "ffd8ffe0":
case "ffd8ffe1":
case "ffd8ffe2":
    type = "image/jpeg";
    break;

Abschließend können Sie Datei-Uploads basierend auf den erwarteten MIME-Typen akzeptieren oder ablehnen.

Hinweis: Es ist wichtig, sich dessen bewusst zu sein Selbst wenn eine Datei umbenannt wird, kann mit dieser Technik ihr wahrer MIME-Typ ermittelt werden.

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