J'ai lu ceci et cette question qui semble suggérer que le type de fichier MIME pourrait être vérifié en utilisant javascript côté client. Maintenant, je comprends que la vraie validation doit encore être faite côté serveur. Je souhaite effectuer une vérification côté client pour éviter un gaspillage inutile des ressources du serveur.

Pour tester si cela peut être fait côté client, j'ai changé l'extension d'un JPEGfichier de test .pnget choisi 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 16 Oct 2012 10:00:00 GMT + 0000 (UTC), nom: "test.png", type: "image / png", size: 500055…}

Il indique que le type est, image/pngce qui semble indiquer que la vérification est effectuée en fonction de l'extension de fichier au lieu du type MIME. J'ai essayé Firefox 22.0 et cela me donne le même résultat. Mais selon les spécifications du W3C , le reniflage MIME devrait être implémenté.

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 je manque quelque chose?

Vous pouvez facilement déterminer le type de fichier MIME avec JavaScript FileReaderavant de le télécharger sur un serveur. Je conviens que nous devrions préférer la vérification côté serveur plutôt que côté client, mais la vérification côté client est toujours possible. Je vais vous montrer comment et fournir une démo fonctionnelle en bas.

Vérifiez que votre navigateur prend en charge à la fois Fileet Blob. Tous les principaux devraient.

if (window.FileReader && window.Blob) {
    // All the File APIs are supported.
} else {
    // File and Blob are not supported
}

Étape 1:

Vous pouvez récupérer les Fileinformations d'un <input>élément comme celui-ci ( ref ):

<input type="file" id="your-files" multiple>
<script>
var control = document.getElementById("your-files");
control.addEventListener("change", function(event) {
    // When the control has changed, there are new files
    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);
</script>

Voici une version glisser-déposer de ce qui précède ( ref ):

<div id="your-files"></div>
<script>
var target = document.getElementById("your-files");
target.addEventListener("dragover", function(event) {
    event.preventDefault();
}, false);

target.addEventListener("drop", function(event) {
    // Cancel default actions
    event.preventDefault();
    var files = event.dataTransfer.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);
</script>

Étape 2:

Nous pouvons maintenant inspecter les fichiers et découvrir les en-têtes et les types MIME.

✘ Méthode rapide

Vous pouvez naïvement demander à Blob le type MIME du fichier qu'il représente en utilisant ce modèle:

var blob = files[i]; // See step 1 above
console.log(blob.type);

Pour les images, les types MIME reviennent comme suit:

image / image jpeg
/ png
...

Attention: le type MIME est détecté à partir de l'extension de fichier et peut être trompé ou usurpé. On peut renommer a .jpgen a .pnget le type MIME sera signalé comme image/png.

✓ Méthode appropriée d'inspection de l'en-tête

Pour obtenir le type MIME de bonne foi d'un fichier côté client, nous pouvons aller plus loin et inspecter les premiers octets du fichier donné pour les comparer aux soi-disant nombres magiques . Soyez averti que ce n'est pas tout à fait simple car, par exemple, JPEG a quelques «nombres magiques». C'est parce que le format a évolué depuis 1991. Vous pourriez vous en tirer en ne vérifiant que les deux premiers octets, mais je préfère vérifier au moins 4 octets pour réduire les faux positifs.

Exemple de signatures de fichier JPEG (4 premiers octets):

FF D8 FF E0 (SOI + ADD0)
FF D8 FF E1 (SOI + ADD1)
FF D8 FF E2 (SOI + ADD2)

Voici le code indispensable pour récupérer l'en-tête du fichier:

var blob = files[i]; // See step 1 above
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);

Vous pouvez ensuite déterminer le type MIME réel comme ceci (plus de signatures de fichiers ici et ici ):

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"; // Or you can use the blob.type as fallback
        break;
}

Acceptez ou rejetez les téléchargements de fichiers à votre guise en fonction des types MIME attendus.

Démo

Voici une démo fonctionnelle pour les fichiers locaux et distants (j'ai dû contourner CORS juste pour cette démo). Ouvrez l'extrait de code, exécutez-le et vous devriez voir trois images distantes de types différents affichés. En haut, vous pouvez sélectionner une image locale ou un fichier de données, et la signature du fichier et / ou le type MIME seront affichés.

Notez que même si une image est renommée, son vrai type MIME peut être déterminé. Voir ci-dessous.

Capture d'écran

// Return the first few bytes of the file as a hex string
function getBLOBFileHeader(url, 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(url, header);
  };
  fileReader.readAsArrayBuffer(blob);
}

function getRemoteFileHeader(url, callback) {
  var xhr = new XMLHttpRequest();
  // Bypass CORS for this demo - naughty, Drakes
  xhr.open('GET', '//cors-anywhere.herokuapp.com/' + url);
  xhr.responseType = "blob";
  xhr.onload = function() {
    callback(url, xhr.response);
  };
  xhr.onerror = function() {
    alert('A network error occurred!');
  };
  xhr.send();
}

function headerCallback(url, headerString) {
  printHeaderInfo(url, headerString);
}

function remoteCallback(url, blob) {
  printImage(blob);
  getBLOBFileHeader(url, blob, headerCallback);
}

function printImage(blob) {
  // Add this image to the document body for proof of GET success
  var fr = new FileReader();
  fr.onloadend = function() {
    $("hr").after($("<img>").attr("src", fr.result))
      .after($("<div>").text("Blob MIME type: " + blob.type));
  };
  fr.readAsDataURL(blob);
}

// Add more from http://en.wikipedia.org/wiki/List_of_file_signatures
function mimeType(headerString) {
  switch (headerString) {
    case "89504e47":
      type = "image/png";
      break;
    case "47494638":
      type = "image/gif";
      break;
    case "ffd8ffe0":
    case "ffd8ffe1":
    case "ffd8ffe2":
      type = "image/jpeg";
      break;
    default:
      type = "unknown";
      break;
  }
  return type;
}

function printHeaderInfo(url, headerString) {
  $("hr").after($("<div>").text("Real MIME type: " + mimeType(headerString)))
    .after($("<div>").text("File header: 0x" + headerString))
    .after($("<div>").text(url));
}

/* Demo driver code */

var imageURLsArray = ["http://media2.giphy.com/media/8KrhxtEsrdhD2/giphy.gif", "http://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png", "http://static.giantbomb.com/uploads/scale_small/0/316/520157-apple_logo_dec07.jpg"];

// Check for FileReader support
if (window.FileReader && window.Blob) {
  // Load all the remote images from the urls array
  for (var i = 0; i < imageURLsArray.length; i++) {
    getRemoteFileHeader(imageURLsArray[i], remoteCallback);
  }

  /* Handle local files */
  $("input").on('change', function(event) {
    var file = event.target.files[0];
    if (file.size >= 2 * 1024 * 1024) {
      alert("File size must be at most 2MB");
      return;
    }
    remoteCallback(escape(file.name), file);
  });

} else {
  // File and Blob are not supported
  $("hr").after( $("<div>").text("It seems your browser doesn't support FileReader") );
} /* Drakes, 2015 */

img {
  max-height: 200px
}
div {
  height: 26px;
  font: Arial;
  font-size: 12pt
}
form {
  height: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
  <input type="file" />
  <div>Choose an image to see its file signature.</div>
</form>
<hr/>

Comme indiqué dans d'autres réponses, vous pouvez vérifier le type mime en vérifiant la signature du fichier dans les premiers octets du fichier.

Mais ce que font les autres réponses, c'est de charger le fichier entier en mémoire afin de vérifier la signature, ce qui est très coûteux et pourrait facilement geler votre navigateur si vous sélectionnez un gros fichier par accident ou non.

/**
 * Load the mime type based on the signature of the first bytes of the file
 * @param  {File}   file        A instance of File
 * @param  {Function} callback  Callback with the result
 * @author Victor www.vitim.us
 * @date   2017-03-23
 */
function loadMime(file, callback) {
    
    //List of known mimes
    var mimes = [
        {
            mime: 'image/jpeg',
            pattern: [0xFF, 0xD8, 0xFF],
            mask: [0xFF, 0xFF, 0xFF],
        },
        {
            mime: 'image/png',
            pattern: [0x89, 0x50, 0x4E, 0x47],
            mask: [0xFF, 0xFF, 0xFF, 0xFF],
        }
        // you can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
    ];

    function check(bytes, mime) {
        for (var i = 0, l = mime.mask.length; i < l; ++i) {
            if ((bytes[i] & mime.mask[i]) - mime.pattern[i] !== 0) {
                return false;
            }
        }
        return true;
    }

    var blob = file.slice(0, 4); //read the first 4 bytes of the file

    var reader = new FileReader();
    reader.onloadend = function(e) {
        if (e.target.readyState === FileReader.DONE) {
            var bytes = new Uint8Array(e.target.result);

            for (var i=0, l = mimes.length; i<l; ++i) {
                if (check(bytes, mimes[i])) return callback("Mime: " + mimes[i].mime + " <br> Browser:" + file.type);
            }

            return callback("Mime: unknown <br> Browser:" + file.type);
        }
    };
    reader.readAsArrayBuffer(blob);
}


//when selecting a file on the input
fileInput.onchange = function() {
    loadMime(fileInput.files[0], function(mime) {

        //print the output to the screen
        output.innerHTML = mime;
    });
};

<input type="file" id="fileInput">
<div id="output"></div>

Pour tous ceux qui cherchent à ne pas l'implémenter eux-mêmes, Sindresorhus a créé un utilitaire qui fonctionne dans le navigateur et qui a les mappages d'en-tête-mime pour la plupart des documents que vous pourriez souhaiter.

https://github.com/sindresorhus/file-type

Vous pouvez combiner la suggestion de Vitim.us de ne lire que les X premiers octets pour éviter de tout charger en mémoire avec l'utilisation de cet utilitaire (exemple dans es6):

import fileType from 'file-type'; // or wherever you load the dependency

const blob = file.slice(0, fileType.minimumBytes);

const reader = new FileReader();
reader.onloadend = function(e) {
  if (e.target.readyState !== FileReader.DONE) {
    return;
  }

  const bytes = new Uint8Array(e.target.result);
  const { ext, mime } = fileType.fromBuffer(bytes);

  // ext is the desired extension and mime is the mimetype
};
reader.readAsArrayBuffer(blob);

Si vous voulez juste vérifier si le fichier téléchargé est une image, vous pouvez simplement essayer de le charger dans la <img>balise pour vérifier tout rappel d'erreur.

Exemple:

var input = document.getElementsByTagName('input')[0];
var reader = new FileReader();

reader.onload = function (e) {
    imageExists(e.target.result, function(exists){
        if (exists) {

            // Do something with the image file.. 

        } else {

            // different file format

        }
    });
};

reader.readAsDataURL(input.files[0]);


function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
}

C'est ce que tu dois faire

var fileVariable =document.getElementsById('fileId').files[0];

Si vous souhaitez vérifier les types de fichiers image,

if(fileVariable.type.match('image.*'))
{
 alert('its an image');
}

Voici une implémentation de Typescript qui prend en charge webp. Ceci est basé sur la réponse JavaScript de Vitim.us.

interface Mime {
  mime: string;
  pattern: (number | undefined)[];
}

// tslint:disable number-literal-format
// tslint:disable no-magic-numbers
const imageMimes: Mime[] = [
  {
    mime: 'image/png',
    pattern: [0x89, 0x50, 0x4e, 0x47]
  },
  {
    mime: 'image/jpeg',
    pattern: [0xff, 0xd8, 0xff]
  },
  {
    mime: 'image/gif',
    pattern: [0x47, 0x49, 0x46, 0x38]
  },
  {
    mime: 'image/webp',
    pattern: [0x52, 0x49, 0x46, 0x46, undefined, undefined, undefined, undefined, 0x57, 0x45, 0x42, 0x50, 0x56, 0x50],
  }
  // You can expand this list @see https://mimesniff.spec.whatwg.org/#matching-an-image-type-pattern
];
// tslint:enable no-magic-numbers
// tslint:enable number-literal-format

function isMime(bytes: Uint8Array, mime: Mime): boolean {
  return mime.pattern.every((p, i) => !p || bytes[i] === p);
}

function validateImageMimeType(file: File, callback: (b: boolean) => void) {
  const numBytesNeeded = Math.max(...imageMimes.map(m => m.pattern.length));
  const blob = file.slice(0, numBytesNeeded); // Read the needed bytes of the file

  const fileReader = new FileReader();

  fileReader.onloadend = e => {
    if (!e || !fileReader.result) return;

    const bytes = new Uint8Array(fileReader.result as ArrayBuffer);

    const valid = imageMimes.some(mime => isMime(bytes, mime));

    callback(valid);
  };

  fileReader.readAsArrayBuffer(blob);
}

// When selecting a file on the input
fileInput.onchange = () => {
  const file = fileInput.files && fileInput.files[0];
  if (!file) return;

  validateImageMimeType(file, valid => {
    if (!valid) {
      alert('Not a valid image file.');
    }
  });
};

<input type="file" id="fileInput">

Comme Drake le déclare, cela pourrait être fait avec FileReader. Cependant, ce que je présente ici est une version fonctionnelle. Tenez compte du fait que le gros problème avec JavaScript est de réinitialiser le fichier d'entrée. Eh bien, cela se limite uniquement au JPG (pour les autres formats, vous devrez changer le type mime et le nombre magique ):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

Tenez compte du fait que cela a été testé sur les dernières versions de Firefox et Chrome, et sur IExplore 10.

Pour une liste complète des types de mime, consultez Wikipedia .

Pour une liste complète des nombres magiques, consultez Wikipedia .

Voici une extension de la réponse de Roberto14 qui fait ce qui suit:

CECI N'AUTORISE QUE DES IMAGES

Vérifie si FileReader est disponible et revient à la vérification d'extension s'il n'est pas disponible.

Donne une alerte d'erreur si ce n'est pas une image

S'il s'agit d'une image, il charge un aperçu

** Vous devez toujours faire la validation côté serveur, c'est plus une commodité pour l'utilisateur final qu'autre chose. Mais c'est pratique!

<form id="myform">
    <input type="file" id="myimage" onchange="readURL(this)" />
    <img id="preview" src="#" alt="Image Preview" />
</form>

<script>
function readURL(input) {
    if (window.FileReader && window.Blob) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var img = new Image();
                img.onload = function() {
                    var preview = document.getElementById('preview');
                    preview.src = e.target.result;
                    };
                img.onerror = function() { 
                    alert('error');
                    input.value = '';
                    };
                img.src = e.target.result;
                }
            reader.readAsDataURL(input.files[0]);
            }
        }
    else {
        var ext = input.value.split('.');
        ext = ext[ext.length-1].toLowerCase();      
        var arrayExtensions = ['jpg' , 'jpeg', 'png', 'bmp', 'gif'];
        if (arrayExtensions.lastIndexOf(ext) == -1) {
            alert('error');
            input.value = '';
            }
        else {
            var preview = document.getElementById('preview');
            preview.setAttribute('alt', 'Browser does not support preview.');
            }
        }
    }
</script>

La réponse courte est non.

Comme vous le constatez, les navigateurs dérivent typede l'extension de fichier. L'aperçu Mac semble également fonctionner avec l'extension. Je suppose que c'est parce qu'il lit plus rapidement le nom du fichier contenu dans le pointeur, plutôt que de rechercher et de lire le fichier sur le disque.

J'ai fait une copie d'un jpg renommé avec 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

Ce que vous pourriez pirater un contrôle String.indexOf ('jpeg') pour le type d'image.

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

La ligne ambiguë 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, laissant sur l'image
• Base64 décode l'image
• Correspond uniquement à la première ligne des données d'image

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

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