Comment personnaliser Téléchargement / Téléchargement Modèle de Blueimp jQuery File Upload

Je suis en train d'utiliser le jQuery File Upload Démo. J'ai cherché à travers wiki & modèle de moteur de wiki, mais ne pouvait pas trouver une réponse comment personnaliser le Télécharger/Télécharger un modèle sans l'aide de la table de lignes de tag. Chaque fois que j'ai supprimer/modifier le tableau étiquette de ligne il ne fonctionne pas.

Soufflet est mon personnalisés télécharger modèle et il ne fonctionne pas. Je ne sais pourquoi, quelqu'un pourrait s'il vous plaît aider?

uploadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $('<li class="span3"><div class="thumbnail template-upload">' +
                '<div class="preview"><span></span></div>' +
                '<div class="caption"><h5 class="name"></h5>' +
                '<p class="size"></p>' +
                (file.error ? '<div class="error" colspan="2"></div>' :
                        '<div><div class="progress">' +
                            '<div class="bar" style="width:0%;"></div></div></div>' +
                            '<div class="start"><button>Start</button></div>'
                ) + '<div class="cancel"><button>Cancel</button></div></div></div></li>');
            row.find('.name').text(file.name);
            row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.error').text(
                    locale.fileupload.errors[file.error] || file.error
                );
            }
            rows = rows.add(row);
        });
        return rows;
    },

source d'informationauteur bachcao

  1. 6

    En regardant les exemples et le live de la démo, j'ai créé ce jsbin: http://jsbin.com/ivonow/1/

    C'est le code de la démo. J'ai pris le jQuery modèles au bas de l'html et ajouté le uploadTemplate fonction à partir de ci-dessus pour les options passés lors de la configuration de l'fileupload objet.

    J'ai également eu à régler uploadTemplateId et downloadTemplateId null donc il ne serait pas essayer de charger les valeurs par défaut:

    {
  uploadTemplateId: null,
  downloadTemplateId: null,
}

    Dans le code html, j'ai pris la table qui entoure la ligne de modèles et d'ajouter une UL, mais le style est toujours bizarre.

    Espère que cette aide.

  2. 4

    Bien tout d'abord, lorsque vous voulez travailler sur la suppression d'une image qui a été téléchargé, vous avez à travailler sur le modèle-téléchargement et pas le modèle de téléchargement de.

    modèle-upload est utilisé pour un aperçu de ce qui va être téléchargé, et une fois téléchargé, il revient dans le modèle-télécharger.

    Par conséquent, le modèle de l'être remplacé dans votre cas doit être modèle-téléchargement. Il y a un bon exemple sur la façon de le faire ici : https://github.com/blueimp/jQuery-File-Upload/wiki/Template-Engine.

    NOTE 1: le nœud qui serait dynamicaly supprimé est ciblée par la classe CSS modèle-téléchargement. Ainsi, vous devriez essayer de position de cette classe à différentes positions dans ton code (j'ai utilisé des divs et ça marche pour moi). Le "fade" la classe est utilisée pour effet de transition.

    CEPENDANT, il semble qu'il y ait quelques erreurs au sein de cette documentation (probablement à partir de la mise à jour du module qui n'a pas été signalés dans la doc).

    Le code suivant extrait de réécrire le modèle-téléchargement ne fonctionnera pas

    row.find('.delete')
    .attr('data-type', file.delete_type)
    .attr('data-url', file.delete_url);

    en raison de fichier objet n'a aucun delete_type ni delete_url paramètres mais deleteType et deleteUrl paramètres. C'est pour Jquery File Upload de la version 8.9.0tho' (l'ancienne version de travail).

    Si le bouton supprimer n'aurait pas les valeurs correctes si vous il suffit de copier n " coller le code de la doc, par conséquent, il ne fonctionne pas, soit.

    Le bon code pour le bouton supprimer de travail lorsque overwritting le modèle-téléchargement

    row.find('.delete')
    .attr('data-type', file.deleteType)
    .attr('data-url', file.deleteUrl);

    Pour moi, le code suivant fonctionne très bien.

     $('#fileupload').fileupload({  
    downloadTemplateId: '',
    downloadTemplate: function (o) {
        var rows = $();
        $.each(o.files, function (index, file) {
            var row = $( '<div class="template-download fade"><span class="preview"></span>' +
                (file.error ? '<div class="error"></div>' : '') +
                '<button class="delete">Delete</button></div>');
            //row.find('.size').text(o.formatFileSize(file.size));
            if (file.error) {
                row.find('.name').text(file.name);
                row.find('.error').text(file.error);
            } else {
               //row.find('.name').append($('<a></a>').text(file.name));
                if (file.thumbnailUrl) {
                    row.find('.preview').append(
                        $('<a></a>').append(
                            $('<img>').prop('src', file.thumbnailUrl)
                        )
                    );
                }
                row.find('a')
                    .attr('data-gallery', '')
                    .prop('href', file.url);
                row.find('.delete')
                    .attr('data-type', file.deleteType)
                    .attr('data-url', file.deleteUrl);
            }
            rows = rows.add(row);
        });
        return rows;
    }
});