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

Question

J'utilise le plugin Blueimp jQuery file upload pour télécharger des fichiers.

Je n'ai eu aucun problème pour télécharger mais l'option maxFileSize y acceptFileTypes ne fonctionnent 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 + '%');
        }
    });
});

Answer 1

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

Donc sans savoir comment intégrer ces méthodes sans bousiller le script j'ai écrit cette petite fonction. Elle 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 elle ne fonctionnera également que dans la version IU.

Mis à jour pour dépasser le problème suggéré par @lopsided : Ajouté data.originalFiles[0]['type'].length y data.originalFiles[0]['size'].length dans les requêtes pour s'assurer qu'elles existent et ne sont pas vides avant de tester les erreurs. S'ils n'existent pas, aucune erreur ne sera affichée et le test d'erreur côté serveur sera suffisant.

Answer 2

Vous devez inclure jquery.fileupload-process.js y jquery.fileupload-validate.js pour que ça marche.

Answer 3

Comme suggéré dans une précédente réponse, nous avons besoin d'inclure deux fichiers supplémentaires - jquery.fileupload-process.js puis jquery.fileupload-validate.js Cependant que j'en ai besoin pour effectuer certaines supplémentaires appels ajax lors de l'ajout d'un fichier, je m'abonne à l' fileuploadadd événement pour effectuer ces appels. Concernant l'utilisation de l'auteur de ce plugin a proposé les éléments suivants

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

Ajouter des écouteurs d'événement via bind (ou sur la méthode avec jQuery 1.7+) méthode est la meilleure option pour conserver rappel des paramètres par le jQuery File Upload de l'INTERFACE utilisateur de la version.

Alternativement, vous pouvez aussi tout simplement commencer le traitement dans votre propre rappel, comme ceci: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

À l'aide de la combinaison des deux options proposé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);
    });
});

Answer 4

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

Answer 5

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',
        。。。。

il suffit d'ajouter une ligne de code --- 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 tu vas voir que tout va bien ! tu prends juste l'attribut avec un mauvais endroit.