web-dev-qa-db-fra.com

blueImp/jquery file upload - Comment puis-je obtenir le message d'erreur si le type de fichier n'a pas été accepté?

Je souhaite utiliser le téléchargement de fichier BlueImp/Jquery pour pouvoir télécharger des images sur le serveur Web . J'ai ce code JS que j’ai généré en lisant de nombreuses sources.

 $('#file_upload').fileupload('option', {
        dataType: 'json',
        url: '/Upload/UploadFiles',
        maxFileSize: 5000000,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        process: [
            {
                action: 'load',
                fileTypes: /^image\/(gif|jpeg|png)$/,
                maxFileSize: 20000000 // 20MB
            },
            {
                action: 'resize',
                maxWidth: 1440,
                maxHeight: 900
            },
            {
                action: 'save'
            }
        ],
        progressall: function (e, data) {
            $(this).find('.progressbar').progressbar({ value: parseInt(data.loaded / data.total * 100, 10) });
        },
        done: function (e, data) {
            $('#show_image').append('<img src="' + data.result[0].ThumbURL + '" />');
            $('#imgID').val($('#imgID').val() + data.result[0].Id + ',');
            $(this).find('.progressbar').progressbar({ value: 100 });
        },
        error: function (e, data) {
            var a = 1;
        }
    });
});

Cela fonctionne car il ne télécharge aucun fichier qui ne soit pas une image, mais j'aimerais pouvoir obtenir les messages d'erreur (le cas échéant) à montrer à l'utilisateur.

Dans leur démo ils ont du code (jquery.fileupload-ui.js et jquery.fileupload-fp.js) qui crée "magiquement" le code HTML contenant l'erreur (je cherche encore à le comprendre).

Je ne comprends pas vraiment si je dois aussi utiliser ces plugins et personnaliser le code HTML généré ou s'il est plus simple d'obtenir les informations manuellement et de les renseigner.

JS et Jquery sont relativement nouveaux, alors il me manque peut-être quelque chose.

Comment configurer le code HTML généré ou comment obtenir le message d'erreur?

Merci, Oscar

jqueryblueimp
27
JSBach

Pour cela, vous pouvez utiliser le rappel de fichier ajouté pour valider les fichiers, comme ceci, utilisez "return false" pour éviter d'ajouter ce fichier;

 $('#yourfileuploader').fileupload({
                    add: function (e, data) {
                        var fileType = data.files[0].name.split('.').pop(), allowdtypes = 'jpeg,jpg,png,gif';
                        if (allowdtypes.indexOf(fileType) < 0) {
                            alert('Invalid file type, aborted');
                            return false;
                        }

                    }
                });

ou vous pouvez enregistrer le callback fileuploadadded comme ça,

$('#yourfileuploader').fileupload().bind('fileuploadadded', function (e, data) {
                    var fileType = data.files[0].name.split('.').pop(), allowdtypes = 'jpeg,jpg,png,gif';
                    if (allowdtypes.indexOf(fileType) < 0) {
                        alert('Invalid file type, aborted');
                        return false;
                    }
                });

vous pouvez également accéder aux options fileupload acceptFileTypes en utilisant; e.originalEvent.data.fileupload.options.acceptFileTypes

Vous pouvez trouver plus d'informations ici;

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

15
Sameera Millavithanachchi

Je sais que c'est un vieux fil de discussion, mais si quelqu'un cherche toujours comment obtenir le message d'erreur, voici une façon de le faire:

$('#fileupload').bind('fileuploadprocessfail', function (e, data) {
    alert(data.files[data.index].error);
});
34
user2999209

Comme mentionné par user2999209, la bonne façon de procéder est d'utiliser le rappel fileuploadprocessfail.

Pour compléter sa réponse, si vous souhaitez traduire le message d'erreur, vous devez passer l'option suivante (non documentée):

$('#my-uploader').fileupload({
    // ... some options ...
    messages : {
      maxNumberOfFiles: 'AAA Maximum number of files exceeded',
      acceptFileTypes: 'AAA File type not allowed',
      maxFileSize: 'AAA File is too large',
      minFileSize: 'AAA File is too small'
      uploadedBytes : 'AAA Uploaded bytes exceed file size'
    },
    // ... some other options ...
  })
  .on("fileuploadprocessfail", function(e, data) {
    var file = data.files[data.index];
    alert(file.error);
  });

Si vous essayez de télécharger un fichier avec un type de fichier incorrect, le message "Type de fichier AAA non autorisé" s'affiche.

9
Jonathan Pasquier

Utiliser le callback processfail

$('#fileupload').fileupload({
    maxFileSize: 5000000,
    done: function (e, data) {
        $.each(data.result.logo, function (index, file) {
            $('<p/>').text(file.name).appendTo('#fileupload-files');
        });
    },
    processfail: function (e, data) {
        alert(data.files[data.index].name + "\n" + data.files[data.index].error);
    }
});
5
Madhur

Si vous utilisez un serveur PHP, j'ai une solution plus simple. Si vous ne l'êtes pas, je pense que cela pourrait également vous aider.

Vous n'avez pas besoin d'utiliser acceptFileTypes param dans le frontend. Il suffit d’initialiser la classe PHP UploadHandler avec ces paramètres:

array(
    'accept_file_types' => '/\.(gif|jpe?g|png)$/i',
    'upload_url' => 'uploads/', // both of upload_url, upload_dir equals to the upload destination
    'upload_dir' => 'uploads/',
    'max_file_size' => 1024*1024*2 // in byte
)

Lorsque vous transmettez un type de fichier ou une taille de fichier non désirés, le retour ajax ressemblera à quelque chose comme: 

{name: "Dream Come True.mp3", size: 14949044, type: "audio/mp3", error: "File type not allowed"}

ou

{name: "feng (3).jpg", size: 634031, type: "image/jpeg", error: "File is too big"}
4
jchnxu

L'ordre dans lequel vous chargez les scripts est important pour que le message d'erreur apparaisse avec le processus de validation par défaut,

Cette commande fonctionne pour moi:

  1. tmpl.min.js
  2. jquery.ui.widget.js 
  3. jquery.iframe-transport.js
  4. jquery.fileupload.js
  5. jquery.fileupload-ui.js
  6. jquery.fileupload-process.js
  7. jquery.fileupload-validate.js
2
FAjir

Il serait préférable de valider le type de fichier (il s'agirait d'un format comme "image/jpeg") plutôt que d'extention. Dans ce cas, vous évitez les problèmes potentiels liés à des problèmes inattendus similaires et sensibles à la casse.

$('#yourfileuploader').fileupload().bind('fileuploadadded', function (e, data) {
                    var fileType = data.files[0].type;
                    if (type.indexOf('image') < 0) {
                        alert('Invalid file type, aborted');
                        return false;
                    }
                });
1
Oleg Sh

Si vous débutez avec la compréhension du fonctionnement de la gestion des erreurs javascript, il est préférable de consulter le sujet: try/catch (MDN)

Cependant, l’erreur est en réalité une méthode du prototype fileupload, aussi cette fonction s’exécutera-t-elle en théorie lorsque l’erreur se produit.

Ajoutez simplement {votre code} à errorHandler dans la méthode.

...
error: function (e, data) {
        var a = 1; // <--in your example, this does nothing.
        alert(e); // <--or whatever you wish to do with the error
        return a; // <--did you want to return true?
    }
...

Si cette alerte ne se produit jamais, aucune erreur n'est générée. Le code suivant est normalement comment vous les attrapez. (ça ne le fait pas déjà?)

try {

  ...any code you want to exception handle with...

  }
  catch (e) {      
    alert(e);
  }
0
Talvi Watia

Rien de ce que j'ai trouvé dans ces réponses n'a fonctionné pour moi, et étrangement, les développeurs qui ont écrit les démos pour ce plugin utilisent un style différent de celui décrit dans la documentation. Quoi qu'il en soit, c'est en dehors du point. 

J'ai copié le code qu'ils utilisent pour faire fonctionner la version de l'interface utilisateur, ce qui a finalement été décisif pour moi. Ils utilisent la méthode .on et "processalways" pour vérifier les erreurs au lieu d'utiliser une méthode "error" ou "fail". 

view-source: http://blueimp.github.io/jQuery-File-Upload/basic-plus.html

Voici le code source.

À votre santé

0
Nick Res