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

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

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.

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

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

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

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.

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

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

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

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

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

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

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

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.

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

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