web-dev-qa-db-fra.com

jQuery comment vérifier si le fichier téléchargé est une image sans vérifier les extensions?

Débutant ici. Le problème est que j'ai actuellement écrit une méthode qui vérifie la taille du fichier téléchargé et son extension afin de le valider. Toutefois, la vérification des extensions n’est pas une solution, car ce type de validation peut poser de nombreux problèmes. Ce que je veux faire, c'est vérifier le type de fichier actuel et le valider sans utiliser de méthode d'extension. J'ai essayé d'utiliser jQuery file validator mais en vain ... Ceci est un extrait de mon code actuel:

<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

Scénario:

App.Dispatcher.on("uploadpic", function() {         
        $(":file").change(function() {
            if (this.files && this.files[0] && this.files[0].name.match(/\.(jpg|jpeg|png|gif)$/) ) {
                if(this.files[0].size>1048576) {
                    alert('File size is larger than 1MB!');
                }
                else {
                    var reader = new FileReader();
                    reader.onload = imageIsLoaded;
                    reader.readAsDataURL(this.files[0]);
                }
            } else alert('This is not an image file!');
        });
        function imageIsLoaded(e) {
            result = e.target.result;
            $('#image').attr('src', result);
        };
    });

Il est appelé une fois que l'entrée de téléchargement change et après validation, elle télécharge et affiche l'image. Pour le moment, je me soucie uniquement de la validation et toute aide ou idée serait grandement appréciée!

javascriptjqueryvalidation
14
Acallar

Essayez quelque chose comme ça:

JavaScript 

const file = this.files[0];
const  fileType = file['type'];
const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
if (!validImageTypes.includes(fileType)) {
    // invalid file type code goes here.
}

jQuery 

var file = this.files[0];
var fileType = file["type"];
var validImageTypes = ["image/gif", "image/jpeg", "image/png"];
if ($.inArray(fileType, validImageTypes) < 0) {
     // invalid file type code goes here.
}
40
Hoyen

Vous n'avez pas besoin de jQuery ici.

var mimeType=this.files[0]['type'];//mimeType=image/jpeg or application/pdf etc...


//ie image/jpeg will be ['image','jpeg'] and we keep the first value
    if(mimeType.split('/')[0] === 'image'){
       console.log('the file is image');
    }

Vous pouvez également créer une fonction pour vérifier quand un fichier est une image.

function isImage(file){
   return file['type'].split('/')[0]=='image');//returns true or false
}

 isImage(this.file[0]);

Mise à jour (es6)

en utilisant es6 includes, le rend encore plus simple.

const isImage = (file) => file['type'].includes('image');
17
Mike Antoniadis

Voici un conseil rapide si vous voulez juste savoir si le fichier est une image:

var file = this.files[0];
var fileType = file["type"];

if (fileType.search('image') >= 0) {
  ...
}
5
romeromedeiros

Pls renvoient une requête connexe ici . La réponse proposée ici suggère de charger l'image dans un objet Image et de vérifier que ses propriétés de largeur et de hauteur sont non nulles ... Je pense que la technique peut également être utilisée pour résoudre votre problème.

J'ai également élaboré un violon pour que vous vous référiez. Code pertinent ci-dessous:

var img = new Image();
img.addEventListener("load",function(){
  alert('success');
});
img.addEventListener("error",function(){
      alert('error');
});
  img.src = picFile.result;
2
sujit

Ce que je veux faire est de vérifier le type de fichier actuel

Essayez d'accéder à files[0].type property. Voir Utilisation de fichiers d'applications Web

$(":file").on("change", function(e) {

  console.log(this.files[0].type);
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type='file' id='imageLoader' name='imageLoader' accept="image/*" data-type='image' />

2
guest271314

Si quelqu'un vient ici et utilise jQuery Validator, une méthode simple serait:

jQuery.validator.addMethod(
    "onlyimages",
    function (value, element) {
        if (this.optional(element) || !element.files || !element.files[0]) {
            return true;
        } else {
            var fileType = element.files[0].type;
            var isImage = /^(image)\//i.test(fileType);
            return isImage;
        }
    },
    'Sorry, we can only accept image files.'
);

qui est ensuite ajouté à la fonction .validate ().

1
Neil Thompson