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

Question

J'ai lu este y este qui semble suggérer que le type MIME du fichier pourrait être vérifié en utilisant le javascript du côté client. Maintenant, je comprends que la véritable validation doit encore être effectuée côté serveur. Je veux effectuer une vérification côté client pour éviter de gaspiller inutilement les ressources du serveur.

Pour tester si cela peut être fait du côté client, j'ai modifié l'extension d'un fichier de type JPEG fichier de test vers .png et choisissez le fichier à télécharger. Avant d'envoyer le fichier, j'interroge l'objet fichier à l'aide d'une console javascript :

document.getElementsByTagName('input')[0].files[0];

Voici ce que j'obtiens sur Chrome 28.0 :

Fichier {webkitRelativePath : "", lastModifiedDate : Tue Oct 16 2012 10:00:00 GMT+0000 (UTC), nom : "test.png", type : "image/png", taille : 500055 }

Il montre le type à être image/png ce qui semble indiquer que la vérification est effectuée en fonction de l'extension du fichier et non du type MIME. J'ai essayé Firefox 22.0 et il me donne le même résultat. Mais selon la spécification du W3C , Reniflage de MIME doit être mis en œuvre.

Ai-je raison de dire qu'il n'y a aucun moyen de vérifier le type MIME avec javascript pour le moment ? Ou est-ce que quelque chose m'échappe ?

Answer 1

La réponse courte est non.

Comme vous le notez, les navigateurs dérivent type de l'extension du fichier. La prévisualisation Mac semble également fonctionner à partir de l'extension. Je suppose que c'est parce que c'est plus rapide de lire le nom du fichier contenu dans le pointeur, plutôt que de chercher et lire le fichier sur le disque.

J'ai fait une copie d'un jpg renommé en png.

J'ai pu obtenir systématiquement ce qui suit à partir des deux images dans chrome (devrait fonctionner dans les navigateurs modernes).

ÿØÿàJFIFÿþ;CREATOR: gd-jpeg v1.0 (using IJG JPEG v62), quality = 90

Vous pourriez utiliser String.indexOf('jpeg') pour vérifier le type d'image.

Voici un violon à explorer http://jsfiddle.net/bamboo/jkZ2v/1/

La ligne ambigüe que j'ai oublié de commenter dans l'exemple

console.log( /^(.*)$/m.exec(window.atob( image.src.split(',')[1] )) );

• Divise les données img encodées en base64, en laissant l'image.
• Décode l'image en base64
• Correspond uniquement à la première ligne des données de l'image.

Le code du fiddle utilise le décodage base64 qui ne fonctionne pas dans IE9, j'ai trouvé un bel exemple utilisant VB script qui fonctionne dans IE http://blog.nihilogic.dk/2008/08/imageinfo-reading-image-metadata-with.html

Le code pour charger l'image provient de Joel Vardy, qui fait un redimensionnement cool de la toile d'image côté client avant le téléchargement, ce qui peut être intéressant. https://joelvardy.com/writing/javascript-image-upload