Comment puis-je vérifier le type MIME d'un fichier à l'aide de JavaScript avant de le télécharger ?

Comment vérifier le type MIME d'un fichier avec JavaScript avant de le télécharger ?

À l'ère numérique, le téléchargement de fichiers est devenu un aspect fondamental des applications Web. Il est crucial de vérifier le type MIME des fichiers téléchargés pour garantir qu'ils sont conformes aux attentes du serveur et éviter un gaspillage inutile de ressources.

Malgré le scepticisme initial, JavaScript nous permet de vérifier facilement les types MIME de fichiers côté client. Cet article approfondira les procédures, armé d'une démonstration pratique et d'une liste complète des signatures de fichiers largement utilisées.

Préparer le terrain

Avant de nous lancer dans les détails techniques, nous allons d'abord établir une fondation. Les API File et Blob sont indispensables pour la manipulation de fichiers en JavaScript. Heureusement, ces API bénéficient d'une prise en charge généralisée dans les principaux navigateurs.

Étape 1 : Extraction des informations sur les fichiers

Pour récupérer des informations sur les fichiers sélectionnés, nous pouvons exploiter les éléments d'entrée :

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");
  }
});

Étape 2 : Détermination du type MIME

Il existe deux approches pour déterminer le type MIME type :

• Méthode rapide : L'objet JavaScript Blob fournit intrinsèquement une propriété de type MIME :

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

• En-tête Méthode d'inspection : Pour une approche plus fiable, nous pouvons inspecter le dossier en-tête :

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);

Ensuite, nous devons faire correspondre l'en-tête obtenu avec les signatures de fichiers connues pour déterminer le type MIME.

Signatures de fichiers communes

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

Une fois le type MIME identifié, nous pouvons accepter ou refuser le téléchargement du fichier en fonction de critères prédéfinis.

Démo Vitrine

Pour illustrer les concepts abordés, voici une démo fonctionnelle :

// 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);
  });
});

Avantages de la vérification de type MIME côté client

1. Charge réduite du serveur : Élimine les requêtes inutiles du serveur pour les invalides fichiers.
2. Expérience utilisateur améliorée : Empêche les messages d'erreur frustrants et les retards causés par le téléchargement de fichiers incompatibles.
3. Validation robuste des fichiers : Garantit que les fichiers respectent attentes du serveur, minimisant la sécurité et l’intégrité risques.

Conclusion

JavaScript offre un moyen efficace de vérifier les types MIME de fichiers côté client, complétant la validation côté serveur. En tirant parti des API File et Blob, les développeurs peuvent déterminer efficacement le type MIME d'un fichier, améliorant ainsi la sécurité, l'efficacité et l'expérience utilisateur de leurs applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!