web-dev-qa-db-fra.com

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

J'aimerais que jQuery limite le champ de téléchargement de fichier à jpg/jpeg, png et gif. Je suis déjà en train de vérifier le système avec PHP. J'utilise déjà le bouton d'envoi via une fonction JavaScript. Il me faut donc vraiment savoir comment vérifier les types de fichiers avant de le soumettre ou de l'alerter.

javascriptjqueryfile-uploadfile-type
133
Anthony

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

Donc pour superficiellement vérifier 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!');
}
273
Paolo Bergantino

Aucun plugin nécessaire pour cette tâche. Cobbled 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 consiste à définir le bouton de téléchargement sur désactivé, sauf si et jusqu'à ce qu'un type de fichier valide soit sélectionné.

39
Christian

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

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

Notez que contrôler l’extension de fichier n’est pas infaillible car il n’a aucun lien avec le type MIME du fichier. Donc, vous pourriez avoir un fichier .png qui est un document Word et un fichier .doc qui est une image png parfaitement valide. Alors n'oubliez pas de faire plus de contrôles côté serveur;)

27
Julian Aubourg

Pour le front-end, il est très 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:

24
dhruvpatel

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 />
19
Leo

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');               
    }
4
vanessen

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

Lièvre c'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
    }
}
2
Avtandil Kavrelishvili

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

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;
                    }
                });
1
Developer

Ce code fonctionne bien, mais le seul problème est que si le format de fichier est autre que les options spécifiées, il affiche un message d’alerte mais le nom du fichier est affiché alors qu’il devrait être négligé.

$('#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; }
});
1
Abhi
<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>
0
Khaihkd

Si vous avez affaire à plusieurs téléchargements de fichiers (html 5), j'ai pris le commentaire suggéré en haut et je 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!');

        }
    }
0
Jason Roner