Comment faire en sorte que jQuery restreigne les types de fichiers lors du téléchargement?

133

Je voudrais que jQuery limite un champ de téléchargement de fichier à seulement jpg / jpeg, png et gif. Je suis déjà en train de vérifier le backend PHP. J'exécute déjà mon bouton de soumission via une JavaScriptfonction, donc j'ai vraiment besoin de savoir comment vérifier les types de fichiers avant de soumettre ou d'alerter.

Anthony
la source

Réponses:

280

Vous pouvez obtenir la valeur d'un champ de fichier de la même manière que n'importe quel autre champ. Cependant, vous ne pouvez pas le modifier.

Donc, pour vérifier superficiellement si un fichier a la bonne extension, vous pouvez faire quelque chose comme ceci:

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}
Paolo Bergantino
la source
18
Et liez-le à votre formulaire: $("#my_upload_form").bind("submit", function() { // above check });
321X
7
vous pourriez utiliser$('#file_field').change(function(){// above check});
makki
3
$("#my_upload_form").bind("submit", function() { // above check });devrait maintenant être lié à l'aide de $("#my_upload_form").submit(function() { // above check }); api.jquery.com/submit . vous pouvez également empêcher la soumission du formulaire en utilisant$("#my_upload_form").submit(function(e) { // above check e.preventDefault(); });
Liam
1
Dans ce cas, si l'utilisateur ajoutait ".jpg" par exemple au fichier MS Word, FileUpload accepterait ce fichier comme image. Je pense que ce n'est pas juste.
Jeyhun
3
Cela vaut la peine de dire que ce n'est pas une méthode infaillible. À la fin de la journée, assurez-vous que votre backend vérifie les premiers octets du fichier pour s'assurer qu'il est bien le type de fichier que vous voulez vraiment qu'il soit. Une autre chose à laquelle penser est que sous linux et osx, vous pouvez avoir un fichier sans extension qui est en fait du type que vous voulez .. donc cela échouerait aussi
chris
39

Aucun plugin nécessaire uniquement pour cette tâche. Combiné cela à partir de quelques autres scripts:

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

L'astuce ici est de définir le bouton de téléchargement sur désactivé à moins et jusqu'à ce qu'un type de fichier valide soit sélectionné.

Christian
la source
6
désolé mon frère, mais c'est une mauvaise regex. les fichiers peuvent avoir des points dans leur nom. "giel.asd.aaaaa.jpg.png" .match (/\.(.+)$/)
Tim Kretschmer
27

Vous pouvez utiliser le plugin de validation pour jQuery: http://docs.jquery.com/Plugins/Validation

Il se trouve qu'il a une règle accept () qui fait exactement ce dont vous avez besoin: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Notez que le contrôle de l'extension de fichier n'est pas à l'épreuve des balles car il n'est en aucun cas lié au type MIME du fichier. Vous pourriez donc avoir un .png qui est un document Word et un .doc qui est une image png parfaitement valide. N'oubliez donc pas de faire plus de contrôles côté serveur;)

Julien Aubourg
la source
pouvez-vous fournir un exemple comment l'utiliser avec plugins.krajee.com/file-input#option-allowedfileextensions sur IE11
shorif2000
25

Pour le front-end, il est assez pratique de mettre l'attribut ' accept ' si vous utilisez un champ de fichier.

Exemple:

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

Quelques remarques importantes:

Dhruvpatel
la source
1
Tellement mieux que d'utiliser JQuery
Christopher Grigg
19

Vous ne voulez pas vérifier plutôt sur MIME que sur n'importe quelle extension que l'utilisateur ment? Si c'est le cas, c'est moins d'une ligne:

<input type="file" id="userfile" accept="image/*|video/*" required />
Leo
la source
n'obtient pas ce dont il a besoin. c'est juste pour une manipulation plus facile de sélectionner une image dans un dossier avec une extension différente. comme vous pouvez le voir ici -> imageshack.us/a/img20/8451/switchzz.jpg
bernte
Comme cela ne nuit pas à IE <10, et ne nuit pas aux autres codes, c'est une restriction efficace sur ce que vous essayez de restreindre.
Leo
4

pour mon cas, j'ai utilisé les codes suivants:

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }
Vanessen
la source
3

J'essaye d'écrire un exemple de code fonctionnel, je le teste et tout fonctionne.

Le lièvre est le code:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

Javascript:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}
Avtandil Kavrelishvili
la source
1

Ce code fonctionne correctement, mais le seul problème est que si le format de fichier est différent des options spécifiées, il affiche un message d'alerte mais il affiche le nom du fichier alors qu'il devrait le négliger.

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});
Abhi
la source
1

Cet exemple permet de télécharger uniquement une image PNG.

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });
Développeur
la source
Pourriez-vous s'il vous plaît suggérer comment limiter la taille de l'image. Par exemple, une image de taille 10 Mo ne doit pas accepter
PDSSandeep
@PDSSandeep Vérifiez ce lien pls stackoverflow.com/questions/6575159/…
Développeur
0
<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>
Khaihkd
la source
Cela ne peut pas vérifier le type et la taille du fichier, testé dans FF.
Qammar Feroz
0

Si vous avez affaire à plusieurs téléchargements de fichiers (html 5), j'ai pris le commentaire suggéré en haut et l'ai légèrement modifié:

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }
Jason Roner
la source
0
    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';
L'Académie EasyLearn
la source
-1
function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }
Muhammad Saqib Sarwar
la source
-1

Voici un code simple pour la validation javascript, et après avoir validé, il nettoiera le fichier d'entrée.

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}
matheushf
la source