web-dev-qa-db-fra.com

Jquery file upload plugin: comment valider des fichiers sur add?

$('#fileupload')
    .fileupload({
        acceptFileTypes: /(\.|\/)(jpg)$/i
    })
    .on('fileuploadadd', function (e, data) {
        console.log(data.files.valid); //undefined
        setTimeout(function () {
            console.log(data.files.valid); //true or false
        }, 500);
    })
;

jsFiddle

Comment obtenir la valeur booléenne de la propriété data.files.valid sans délai d'expiration?

jqueryblueimpjquery-file-upload
11
cetver

Voici ce que vous voulez faire:

$('#fileupload')
    .fileupload({
        acceptFileTypes: /(\.|\/)(jpg)$/i
    })
    .bind('fileuploadadded', function (e, data) {
        console.log(data.files.valid);
    });

Le fichier principal jquery.fileupload.js ajoute vos fichiers et déclenche l'événement "fileuploadadd", mais c'est avant que les fichiers sont validés. 

Le fichier jquery.fileupload-ui.js effectue la validation une fois les fichiers ajoutés et déclenche un autre événement "fileuploadadded" une fois que cela est fait. 

Changer l'événement, et vous êtes tous ensemble.

Notez s'il vous plaît:

Cette réponse était valide et fonctionnait en mars 2013 lorsqu'elle a été publiée. Il semble que ce plugin de téléchargement ait changé depuis. Cela signifie qu'il y a un nouveau problème, et vous devriez poster une nouvelle question (ou chercher pour voir si quelqu'un l'a déjà fait) plutôt que de changer celle-ci!

13
jszobody

J'avais besoin de faire une validation avec une version actuelle du plugin (5.39.1) et cela fonctionne pour moi:

Veillez à inclure jquery.fileupload-process.js et jquery.fileupload-validate.js dans cet ordre aprèsjquery.fileupload.js et avant votre script d'initialisation.

Dans votre script d'initialisation, ajoutez les options de validation et vérifiez la validation dans le rappel fileuploadprocessalways:

$('.fileinput').fileupload({
    // The regular expression for allowed file types, matches
    // against either file type or file name:
    acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
    // The maximum allowed file size in bytes:
    maxFileSize: 10000000, // 10 MB
    // The minimum allowed file size in bytes:
    minFileSize: undefined, // No minimal file size
    // The limit of files to be uploaded:
    maxNumberOfFiles: 10
  }).on('fileuploadprocessalways', function (e, data) {
    var currentFile = data.files[data.index];
    if (data.files.error && currentFile.error) {
      // there was an error, do something about it
      console.log(currentFile.error);
    }
  });

Toutes les validations sont facultatives, mais ne laissez pas celles dont vous n'avez pas besoin undefined.

20
bfncs

Voici ce que j'ai fait et cela a fonctionné pour moi pour les versions plus récentes: J'ai créé une validation par type de fichier et sa taille.

$("#fileUploadArea").fileupload({
        dataType: 'json',
        url:'${upload}',
        multiple:true,
        autoSubmit:false,
        maxNumberOfFiles: Number('${quantidadeMaximaArquivosUpload}'),
        dynamicFormData: function()
        {
            var data ={ 
                    idEntidadeEmpresarial: $('#idEntidadeEmpresarial').val(),
                    idDominioFamilia: $('#idDominioFamilia').val(),
                    idSubgrupo: $('select[id^="subgrupo_').map(function(){return $(this).val();}).get(),
                    descricao: $('#descricao').val(),
                    validade: $('#validade').val()
            }
            return data;
        },
        headers: {
            Accept: "application/json"
        },
        accept: 'application/json',        
        imageMaxWidth: 800,
        imageMaxHeight: 800,
        imageCrop: true ,
        stop: function(){
            $.unblockUI();
            if($('#fechar').is(":checked")){
                window.close();
            }else{
                $('select[id^="subgrupo_').each(function(){
                    $(this).val('');
                    $(this).trigger("chosen:updated");
                })
                $('#validade').val('');
                $('#descricao').val('');
                $('#sucesso').html('');
                $('#sucesso').append('<p><spring:message code="upload.sucesso"/>');
                $('#sucesso').show();
            }
        },
        error: function(files,status,errMsg)
        {
            $('#erro').html('');
            $('#erro').append('<p>'+errMsg+'</p>');
            $('#erro').show();
        },
        acceptFileTypes : ${listaExtensaoPermitidas}
    }).on('fileuploadprocessalways', function (e, data) {
        var currentFile = data.files[data.index];

        var tamanho = currentFile.size;
        var extensao = currentFile.name.substring(currentFile.name.lastIndexOf(".") +1,currentFile.name.length);            

        if(hashExtensao.get(extensao.toUpperCase()) < tamanho){
            alert("file type max size "+hashExtensao.get(extensao.toUpperCase());
            data.abort();
        }

    });
2
Raphael Villas Boas

C’est ce que vous voulez faire avec la nouvelle version du plugin (9.11.2): Inclure ces fichiers:
- jquery.ui.widget.js
- jquery.iframe-transport.js
- jquery.fileupload.js
- jquery.fileupload-process.js
- jquery.fileupload-validate.js 

$('#fileupload')
.fileupload({
    acceptFileTypes: /(\.|\/)(jpg)$/i
})
.on('fileuploadadd', function (e, data) {
    console.log('validation object not available at this point. Do not do submit here');
})
.on('fileuploadprocessalways', function (e, data) {
    console.log(data.files.error);//true if error
    console.log(data.files[0].error);//error message
    if(!data.files.error) data.submit(); //do submission here
});
0
Tomasz

Eh bien, la réponse de @jszbody est la réponse parfaite. 

Cependant, comme moi, au cas où quelqu'un atterrirait ici à la recherche d'une solution à un problème similaire où l'utilisateur souhaite savoir si le fichier n'est pas ajouté correctement.

blueimp jquery-file-upload Ne génère pas d'erreur en cas d'échec de l'ajout

0
Nis

Je pense que cela peut être possible en utilisant la méthode add.

    var fileUploadInit = function() {
    $("#file-upload-form").fileupload({
        dataType: "json",
        url: url,
        add: function (e, data){
            if(validatefunction(data)){
                data.submit();
            } else {
                return false;
            }
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#upload-progress').css('width',progress + '%');
        },
        done: function(e, data) {
            debugger
        },
        processfail: function(e, data){
            debugger
        }

    })
}
var validatefunction = function(data){
    // Do validation here. Return true if everything is correct else return                 false
}
0
user3260373