Comment faire pour que jQuery restreint les types de fichiers lors du téléchargement?

pas de plugin nécessaire pour cette tâche.

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

ici, l'astuce consiste à désactiver le bouton de téléchargement 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 y 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 du fichier n'est pas une preuve par balle car il n'est en aucune façon lié au type mimétique du fichier. Donc vous pourriez avoir un .png qui est un document word et un .c'est une image png parfaitement valide. Alors n'oubliez pas de faire plus de contrôles côté serveur ;)

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

<input type="file" id="userfile" accept="image/*|video/*" required />

pour le front-end, il est assez commode de mettre l'attribut accepter ' 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 notes importantes:

• l'attribut accept est supporté dans Internet Explorer 10, Firefox, Opera, Chrome et Safari 6.
• il montrera texte pour l'extension de fichier différemment dans la boîte de dialogue de navigateur de fichier de différents navigateurs.

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'essaie d'écrire un exemple de code de travail, je le teste et tout fonctionne.

Hare est 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 très 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 il affiche le nom du fichier alors qu'il devrait être 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 une image PNG seulement.

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 je l'ai modifié un peu:

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

        }
    }

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 qu'il valide, 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("");
    }
}