maxFileSize et acceptFileTypes dans le plugin de téléchargement de fichiers blueimp ne fonctionnent pas. Pourquoi?


85

J'utilise le plugin de téléchargement de fichiers Blueimp jQuery pour télécharger des fichiers.

Je n'ai eu aucun problème de téléchargement mais l'option maxFileSizeet acceptFileTypesne fonctionne pas.

Voici mon code:

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                    .appendTo('#div_files');
            });
        },
        fail: function (e, data) {
            $.each(data.messages, function (index, error) {
                $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                    .appendTo('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});

Bonjour, j'essaie d'implémenter ce code pour le téléchargement de fichiers, mais j'obtiens l'erreur qui indique Erreur de téléchargement de fichier: Les octets téléchargés dépassent la taille du fichier Pouvez-vous s'il vous plaît suggérer quelle est la cause?
Jay Maharjan

2
@JayMaharjan Êtes-vous sûr que maxFileSize est correctement configuré?
YoBre

1
Après avoir effectué la configuration appropriée dans php.ini, je suis maintenant en mesure de télécharger de gros fichiers. Merci de votre aide. :)
Jay Maharjan

Pour mon cas, le gif était redimensionné et converti en png, puis le filtre pour gif a évidemment échoué. Et curieusement, cela a commencé à fonctionner tout seul dès que j'ai compris ce qui se passait, j'ai vérifié deux fois si j'avais fait quelque chose avec la bibliothèque mais rien, tout ce que j'avais mis était des journaux de console, que j'ai supprimés et qui fonctionnent toujours. Publier pour que cela puisse aider quelqu'un.
Zia Ul Rehman Mughal

Réponses:


135

J'ai eu le même problème, et le gars de blueimp dit que " maxFileSize et acceptFileTypes ne sont supportés que par la version de l'interface utilisateur " et a fourni un lien (cassé) pour incorporer les méthodes _validate et _hasError.

Alors sans savoir comment incorporer ces méthodes sans gâcher le script, j'ai écrit cette petite fonction. Il semble fonctionner pour moi.

Ajoutez simplement ceci

add: function(e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Filesize is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.submit();
        }
},

au début des options .fileupload comme indiqué dans votre code ici

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                    uploadErrors.push('Not an accepted file type');
                }
                if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
        },
        dataType: 'json',
        autoUpload: false,
        // acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        // maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                .appendTo('#div_files');
            });
        },
        fail: function (e, data) {
            $.each(data.messages, function (index, error) {
                $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                .appendTo('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});

Vous remarquerez que j'ai également ajouté une fonction de taille de fichier, car cela ne fonctionnera également que dans la version de l'interface utilisateur.

Mise à jour pour surmonter le problème suggéré par @lopsided: Ajouté data.originalFiles[0]['type'].lengthet data.originalFiles[0]['size'].lengthdans les requêtes pour s'assurer qu'ils existent et ne sont pas vides avant de tester les erreurs. S'ils n'existent pas, aucune erreur ne sera affichée et ne reposera que sur les tests d'erreur côté serveur.


Ceci est vraiment utile. Cependant, il convient de noter qu'il data.originalFiles[0]['type']est vide lors du téléchargement à partir d'un navigateur qui ne prend pas en charge l'API de fichier. C'était le cas sur mon téléphone Android. Ce que j'ai fait, c'est de le transmettre si cette valeur n'est pas disponible, puis de revenir à la validation de type mime côté serveur. Sinon, vous ne acceptFileTypes.test
déséquilibré

@lopsided c'est étrange, j'obtiens la valeur de data.originalFiles [0] ['type'] et ['size'] sur mon téléphone Android et il réussit les deux tests. J'ai en fait des problèmes avec mon téléphone où tout semble fonctionner sans erreur mais le fichier n'est pas téléchargé. Aucun problème ailleurs, juste l'Android.
PaulMrG

8
Je pense que la condition 'data.originalFiles [0] [' size ']. Length' est obsolète donc elle renvoie toujours false.
kkocabiyik

5
Utilisez data.files [0] ['size'] et data.files [0] ['type']
Jose

2
Utilisation sans 'length' (data.originalFiles [0] ['size'] && data.originalFiles [0] ['size']> 500000)? 'true': 'false' fonctionne bien, mais je veux savoir si je manque un scénario 1. data.originalFiles [0] ['size']? 'true': 'false' (1) renvoie false pour les valeurs 0, null, undefined
Ganesh Arulanantham

49

Vous devez inclure jquery.fileupload-process.js et jquery.fileupload-validate.js pour que cela fonctionne.


4
Cela semble être la meilleure réponse. ;)
thasmo

8
L'ordre dans lequel vous chargez les scripts est important pour que le message d'erreur apparaisse: tmpl.min.js> jquery.ui.widget.js> jquery.iframe-transport.js> jquery.fileupload.js> jquery.fileupload-ui.js> jquery.fileupload-process.js> jquery.fileupload-validate.js
a11r

3
Le problème est le même, pouvez-vous donner un exemple de travail s'il vous plaît?
Vlatko

3
J'ai ce même problème. Mes fichiers JS sont dans l'ordre exact décrit, mais je suis toujours capable de télécharger des fichiers qui ne sont pas acceptés selon l'expression régulière, mais aussi massivement au-delà de la limite de taille de fichier. J'utilise la dernière version de FileUpload, 9.10.5 avec jQuery 1.11.1
Mr Pablo

3
Cela ne fonctionne pas non plus pour moi, même avec tous les scripts inclus dans le bon ordre.
BadHorsie

10

Comme suggéré dans une réponse précédente, nous devons inclure deux fichiers supplémentaires - jquery.fileupload-process.jspuis jquery.fileupload-validate.jscependant, comme je dois effectuer des appels ajax supplémentaires tout en ajoutant un fichier, je m'abonne à l' fileuploadaddévénement pour effectuer ces appels. Concernant une telle utilisation, l'auteur de ce plugin a suggéré ce qui suit

Veuillez jeter un œil ici: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

L'ajout d'écouteurs d'événements supplémentaires via la méthode bind (ou sur la méthode avec jQuery 1.7+) est l'option préférée pour conserver les paramètres de rappel par la version de l'interface utilisateur de téléchargement de fichier jQuery.

Vous pouvez également simplement démarrer le traitement dans votre propre rappel, comme ceci: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

En utilisant la combinaison des deux options suggérées, le code suivant fonctionne parfaitement pour moi

$fileInput.fileupload({
    url: 'upload_url',
    type: 'POST',
    dataType: 'json',
    autoUpload: false,
    disableValidation: false,
    maxFileSize: 1024 * 1024,
    messages: {
        maxFileSize: 'File exceeds maximum allowed size of 1MB',
    }
});

$fileInput.on('fileuploadadd', function(evt, data) {
    var $this = $(this);
    var validation = data.process(function () {
        return $this.fileupload('process', data);
    });

    validation.done(function() {
        makeAjaxCall('some_other_url', { fileName: data.files[0].name, fileSizeInBytes: data.files[0].size })
            .done(function(resp) {
                data.formData = data.formData || {};
                data.formData.someData = resp.SomeData;
                data.submit();
        });
    });
    validation.fail(function(data) {
        console.log('Upload error: ' + data.files[0].error);
    });
});

1
Amith, j'ai essayé ceci et j'ai obtenu l'erreur suivante:Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process'
TheVillageIdiot

1
Cela signifie presque toujours que cela .fileupload()n'a pas été appelé au bon moment. Sans voir le code, il est presque impossible de diagnostiquer. Je suggère d'ouvrir une nouvelle question et d'afficher le code pertinent, peut-être en tant que jsfiddle.
Amith George

@TheVillageIdiot Essayez-vous d'établir la logique de 'fileuploadadd' dans la déclaration $ fileInput.fileupload? J'ai eu une erreur similaire quand j'ai essayé de replier l'exemple d'Amith à l'intérieur de quelque chose comme ceci: $('#fileupload').fileupload({ blah : blah, blah : blah, }) $fileInput.on('fileuploadadd', function(evt, data) { var $this = $(this); var validation = data.process(function () { return $this.fileupload('process', data); }); ... c'était évident quand j'y pensais, mais j'essayais de définir la logique à l'intérieur de quelque chose que je n'avais pas encore fini de déclarer.
jdhurst

Je reçois cette erreur: Uncaught ReferenceError: makeAjaxCall
rida mukhtar

8

Cela fonctionne pour moi dans Firefox

$('#fileupload').fileupload({

    dataType: 'json',
    //acceptFileTypes: /(\.|\/)(xml|pdf)$/i,
    //maxFileSize: 15000000,

    add: function (e, data) {
        var uploadErrors = [];

        var acceptFileTypes = /\/(pdf|xml)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('File type not accepted');
        }

        console.log(data.originalFiles[0]['size']) ;
        if (data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Filesize too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        }

    },
    done: function (e, data) {
        data.context.text('Success!.');
    }
});

3
Bienvenue dans Stack Overflow! Pourriez-vous s'il vous plaît réécrire cette réponse afin qu'elle soit en anglais? Je sais que les traducteurs automatisés peuvent parfois rendre les choses difficiles à dire, mais l'anglais est le seul langage (sans programmation) que nous utilisons ici.
Pop

15
remarquez, vous n'avez pas besoin d'être un linguiste rusé pour être en mesure de comprendre que nasatome dit: "Cela fonctionne pour moi: c'est correct dans Firefox." L'erreur de téléchargement est "taille de fichier trop grande". Je suis australien et j'ai grandi en parlant anglais, mais je pense qu'il y a une certaine attitude anglophone. "L'anglais est la seule langue que nous utilisons ici" n'est pas vrai. Les gens ici utilisent de nombreuses langues différentes. C'est cependant la politique de ce site d'avoir des questions et réponses en anglais.
Tim Ogilvy

3

ouvrez le fichier nommé "jquery.fileupload-ui.js", vous verrez le code comme ceci:

 $.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        // By default, files added to the widget are uploaded as soon
        // as the user clicks on the start buttons. To enable automatic
        // uploads, set the following option to true:
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        autoUpload: false,
        // The ID of the upload template:
        uploadTemplateId: 'template-upload',
        // The ID of the download template:
        downloadTemplateId: 'template-download',
        。。。。

ajoutez simplement un code de ligne --- le nouvel attribut "acceptFileTypes", comme ceci:

 options: {
        // By default, files added to the widget are uploaded as soon
        // as the user clicks on the start buttons. To enable automatic
        // uploads, set the following option to true:
        **acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,**
        autoUpload: false,
        // The ID of the upload template:
        uploadTemplateId: 'template-upload',
        // The ID of the download template:
        downloadTemplateId: 'template-d

maintenant vous verrez que tout va bien! ~ vous prenez juste l'attribut avec un mauvais endroit.


C'est une mauvaise idée de jamais modifier le code de base d'un plugin / bibliothèque si vous pouvez l'aider.
BadHorsie

3

Si vous avez tous les plugins JS importés et dans le bon ordre, mais que vous rencontrez toujours des problèmes, il semble que la spécification de votre propre gestionnaire "add" nerfs celui du plugin * -validate.js, qui se déclencherait normalement désactiver toute la validation en appelant data.process (). Donc, pour résoudre ce problème, faites quelque chose comme ceci dans votre gestionnaire d'événements "add":

$('#whatever').fileupload({
...
add: function(e, data) {
   var $this = $(this);
   data.process(function() {
      return $this.fileupload('process', data);
   }).done(function(){
      //do success stuff
      data.submit(); <-- fire off the upload to the server
   }).fail(function() {
      alert(data.files[0].error);
   });
}
...
});

Résolu mon problème
fezfox

2

Exemple vérifié / valide pour:

  • entrées de fichiers multiples
  • pour un ou plusieurs fichiers de téléchargement - $.grep()pour supprimer les fichiers du tableau avec des erreurs
  • imageet audioformat
  • types de fichiers dynamiques de chaîne par new RegExp()

Remarque: acceptFileTypes.test()- vérifiez les types de mime, pour le fichier adio tel .mp3qu'il sera audio/mpeg- pas seulement extenstion. Pour toutes les options blueimp: https://github.com/blueimp/jQuery-File-Upload/wiki/Options

$('input[type="file"]').each(function(i){

    // .form_files is my div/section of form for input file and progressbar
    var $progressbar = $(this).parents('.form_files:first').find('.progress-bar:first');

    var $image_format = 'jpg|jpeg|jpe|png|gif';
    var $audio_format = 'mp3|mpeg';
    var $all_formats = $image_format + '|' + $audio_format;

    var $image_size = 2;
    var $audio_size = 10;
    var mb = 1048576;

    $(this).fileupload({
        // ...
        singleFileUploads: false,   // << send all together, not single
        // ...
        add: function (e, data) {

            // array with all indexes of files with errors
            var error_uploads_indexes = [];

            // when add file - each file
            $.each(data.files, function(index, file) {

                // array for all errors
                var uploadErrors = [];


                // validate all formats first
                if($all_formats){

                    // check all formats first - before size
                    var acceptFileTypes = "(\.|\/)(" + $all_formats + ")$";
                    acceptFileTypes = new RegExp(acceptFileTypes, "i");

                    // when wrong format
                    if(data.files[index]['type'].length && !acceptFileTypes.test(data.files[index]['type'])) {
                        uploadErrors.push('Not an accepted file type');

                    }else{

                        // default size is image_size
                        var $my_size = $image_size;

                            // check audio format
                            var acceptFileTypes = "(\.|\/)(" + $audio_format + ")$";
                            acceptFileTypes = new RegExp(acceptFileTypes, "i");

                            // alert(data.files[index]['type']);
                            // alert(acceptFileTypes.test('audio/mpeg'));

                            // if is audio then size is audio_size
                            if(data.files[index]['type'].length && acceptFileTypes.test(data.files[index]['type'])) {
                                $my_size = $audio_size;
                            }

                        // check size
                        if(data.files[index]['size'] > $my_size * mb) {
                            uploadErrors.push('Filesize is too big');
                        };
                    };

                }; // << all_formats

                // when errors
                if(uploadErrors.length > 0) {
                    //  alert(uploadErrors.join("\n"));

                    // mark index of error file
                    error_uploads_indexes.push(index);
                    // alert error
                    alert(uploadErrors.join("\n"));

                };

            }); // << each


            // remove indexes (files) with error
            data.files = $.grep( data.files, function( n, i ) {
                return $.inArray(i, error_uploads_indexes) ==-1;
            });


            // if are files to upload
            if(data.files.length){
                // upload by ajax
                var jqXHR = data.submit().done(function (result, textStatus, jqXHR) {
                        //...
                     alert('done!') ;
                        // ...
                });
            } // 

        }, // << add
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $progressbar.css(
                'width',
                progress + '%'
                );
        }
    }); // << file_upload

    //          
}); // << each input file

1

Juste un exemple de gestionnaire d'événements pour Add event. Suppose que l'option singleFileUploads est activée (qui est la valeur par défaut). Lire la suite de la documentation jQuery File Upload sur la manière de lier avec l'événement add / fileuploadadd. À l'intérieur de la boucle, vous pouvez utiliser les deux vars ceci ou file . Un exemple d'obtention de la propriété size: this ['size'] ou file.size .

    /**
     * Handles Add event
     */
    base.eventAdd = function(e, data) {

        var errs = [];
        var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;
        var maxFileSize = 5000000;

        // Validate file
        $.each(data.files, function(index, file) {
            if (file.type.length && !acceptFileTypes.test(file.type)) {
                errs.push('Selected file "' + file.name + '" is not alloawed. Invalid file type.');
            }
            if (this['size'] > maxFileSize) {
                errs.push('Selected file "' + file.name + '" is too big, ' + parseInt(file.size / 1024 / 1024) + 'M.. File should be smaller than ' + parseInt(maxFileSize / 1024 / 1024) + 'M.');
            }
        });

        // Output errors or submit data
        if (errs.length > 0) {
            alert('An error occured. ' + errs.join(" "));
        } else {
            data.submit();
        }
    };

1

Cela a fonctionné pour moi dans Chrome, la version jquery.fileupload.js est 5.42.3

     add: function(e, data) {
        var uploadErrors = [];
        var ext = data.originalFiles[0].name.split('.').pop().toLowerCase();
        if($.inArray(ext, ['odt','docx']) == -1) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0].size > (2*1024*1024)) {//2 MB
            uploadErrors.push('Filesize is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.submit();
        }
    },

1
Merci. Fonctionne également sur 9.21.
geca

1
.fileupload({
    add: function (e, data) { 
        var attachmentValue = 3 * 1000 * 1024;
        var totalNoOfFiles = data.originalFiles.length;
        for (i = 0; i < data.originalFiles.length; i++) {
            if (data.originalFiles[i]['size'] > attachmentValue) {
                $attachmentsList.find('.uploading').remove();
                $attachmentMessage.append("<li>" + 'Uploaded bytes exceeded the file size' + "</li>");
                $attachmentMessage.show().fadeOut(10000, function () {
                    $attachmentMessage.html('');
                });
                data.originalFiles.splice(i, 1);
            }
        }
        if (data.files[0]) {
            $attachmentsList
           .prepend('<li class="uploading" class="clearfix loading-content">' + data.files[0].name + '</li>');
        }
        data.submit();                    
    }

1

Au cas où quiconque recherche des formats couramment pris en charge par le serveur

3g2|3gp|3gp2|3gpp|aac|aaf|aca|accdb|accde|accdt|acx|adt|adts|afm|ai|aif|aifc|aiff|appcache|application|art|asd|asf|asi|asm|asr|asx|atom|au|avi|axs|bas|bcpio|bin|bmp|c|cab|calx|cat|cdf|chm|class|clp|cmx|cnf|cod|cpio|cpp|crd|crl|crt|csh|css|csv|cur|dcr|deploy|der|dib|dir|disco|dll|dllconfig|dlm|doc|docm|docx|dot|dotm|dotx|dsp|dtd|dvi|dvr-ms|dwf|dwp|dxr|eml|emz|eot|eps|esd|etx|evy|exe|execonfig|fdf|fif|fla|flr|flv|gif|gtar|gz|h|hdf|hdml|hhc|hhk|hhp|hlp|hqx|hta|htc|htm|html|htt|hxt|ico|ics|ief|iii|inf|ins|isp|IVF|jar|java|jck|jcz|jfif|jpb|jpe|jpeg|jpg|js|json|jsonld|jsx|latex|less|lit|lpk|lsf|lsx|lzh|m13|m14|m1v|m2ts|m3u|m4a|m4v|man|manifest|map|mdb|mdp|me|mht|mhtml|mid|midi|mix|mmf|mno|mny|mov|movie|mp2|mp3|mp4|mp4v|mpa|mpe|mpeg|mpg|mpp|mpv2|ms|msi|mso|mvb|mvc|nc|nsc|nws|ocx|oda|odc|ods|oga|ogg|ogv|one|onea|onepkg|onetmp|onetoc|onetoc2|osdx|otf|p10|p12|p7b|p7c|p7m|p7r|p7s|pbm|pcx|pcz|pdf|pfb|pfm|pfx|pgm|pko|pma|pmc|pml|pmr|pmw|png|pnm|pnz|pot|potm|potx|ppam|ppm|pps|ppsm|ppsx|ppt|pptm|pptx|prf|prm|prx|ps|psd|psm|psp|pub|qt|qtl|qxd|ra|ram|rar|ras|rf|rgb|rm|rmi|roff|rpm|rtf|rtx|scd|sct|sea|setpay|setreg|sgml|sh|shar|sit|sldm|sldx|smd|smi|smx|smz|snd|snp|spc|spl|spx|src|ssm|sst|stl|sv4cpio|sv4crc|svg|svgz|swf|t|tar|tcl|tex|texi|texinfo|tgz|thmx|thn|tif|tiff|toc|tr|trm|ts|tsv|ttf|tts|txt|u32|uls|ustar|vbs|vcf|vcs|vdx|vml|vsd|vss|vst|vsto|vsw|vsx|vtx|wav|wax|wbmp|wcm|wdb|webm|wks|wm|wma|wmd|wmf|wml|wmlc|wmls|wmlsc|wmp|wmv|wmx|wmz|woff|woff2|wps|wri|wrl|wrz|wsdl|wtv|wvx|x|xaf|xaml|xap|xbap|xbm|xdr|xht|xhtml|xla|xlam|xlc|xlm|xls|xlsb|xlsm|xlsx|xlt|xltm|xltx|xlw|xml|xof|xpm|xps|xsd|xsf|xsl|xslt|xsn|xtp|xwd|z|zip

0

Vous pouvez également utiliser une fonction supplémentaire comme:

    function checkFileType(filename, typeRegEx) {
        if (filename.length < 4 || typeRegEx.length < 1) return false;
        var filenameParts = filename.split('.');
        if (filenameParts.length < 2) return false;
        var fileExtension = filenameParts[filenameParts.length - 1];
        return typeRegEx.test('.' + fileExtension);
    }

0

Vous devez inclure jquery.fileupload-process.js et jquery.fileupload-validate.js pour que cela fonctionne.

Ensuite...

$(this).fileupload({
    // ...
    processfail: function (e, data) {
        data.files.forEach(function(file){
            if (file.error) {
                self.$errorMessage.html(file.error);
                return false;
            }
        });
    },
//...
}

Le rappel processfail est lancé après un échec de validation.


0
  • Vous pouvez également utiliser l'extension de fichier pour vérifier le type de fichier.
  • Un moyen plus simple serait de faire quelque chose comme indiqué ci-dessous à l'intérieur add:

    add : function (e,data){
       var extension = data.originalFiles[0].name.substr( 
       (data.originalFiles[0].name.lastIndexOf('.') +1) );
                switch(extension){
                    case 'csv':
                    case 'xls':
                    case 'xlsx':
                        data.url = <Your URL>; 
                        data.submit();
                    break;
                    default:
                        alert("File type not accepted");
                    break;
                }
      }
    

0

si vous avez plusieurs fichiers, vous utilisez une boucle pour vérifier chacun des formats de fichier, quelque chose comme ça

add: function(e, data) {
        data.url = 'xx/';
        var uploadErrors = [];
         var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        console.log(data.originalFiles);
        for (var i = 0; i < data.originalFiles.length; i++) {
            if(data.originalFiles[i]['type'].length && !acceptFileTypes.test(data.originalFiles[i]['type'])) {
                    uploadErrors.push('Not an accepted file type');
                    data.originalFiles
                }
                if(data.originalFiles[i]['size'].length && data.originalFiles[i]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {

                      alert(uploadErrors.join("\n"));
                }
        }
        data.submit();
      },
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.