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

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.

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

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é.

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;)

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:

• L'attribut d'acceptation est pris en charge dans Internet Explorer 10, Firefox, Opera, Chrome et Safari 6.
• Il affichera le texte pour l'extension de fichier différemment dans la boîte de dialogue du navigateur de fichiers à partir de différents navigateurs.

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

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

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
    }
}

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

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

<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>

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!');

        }
    }

    $("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 = '';

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;
    }

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("");
    }
}