Comment personnaliser le modèle de chargement / téléchargement de Blueimp jQuery File Upload

En regardant les exemples et la démo en direct, j’ai créé ce jsbin: http://jsbin.com/ivonow/1/

C’est le code de la démo. J’ai sorti les modèles jQuery au bas du code HTML et ajouté la fonction uploadTemplate d’en haut aux options transmises lors de la configuration de l’object fileupload.

J’ai également dû définir uploadTemplateId et downloadTemplateId sur null pour éviter de charger les valeurs par défaut:

 { uploadTemplateId: null, downloadTemplateId: null, } 

Dans le code HTML, j’ai sorti le tableau qui entoure les modèles de lignes et ajouté une UL, mais le style est toujours bizarre.

J’espère que cela t’aides.

Tout d’abord, lorsque vous souhaitez supprimer une photo qui a été téléchargée, vous devez travailler sur le modèle de téléchargement et non sur le modèle .

template-upload est utilisé pour prévisualiser ce qui va être téléchargé, et une fois téléchargé, il revient dans le modèle-download.

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

REMARQUE 1: le nœud à supprimer dynamicment est ciblé par le téléchargement de modèle de classe CSS. Donc, vous devriez essayer de positionner cette classe à une position différente dans votre code (j’ai utilisé divs et ça marche pour moi). La classe “fade” est utilisée pour l’effet de transition.

CEPENDANT, il semble y avoir quelques erreurs dans cette documentation (probablement d’une mise à jour du module qui n’a pas été rapscope dans la doc).

L’extrait de code suivant pour réécrire le téléchargement du modèle ne fonctionnera pas

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

parce que l’ object de fichier n’a pas de parameters delete_type ni delete_url mais des parameters deleteType et deleteUrl . C’est le cas pour Jquery File Upload version 8.9.0 (l’ancienne version peut fonctionner).

Donc, le bouton de suppression n’aura pas les valeurs correctes si vous copiez et collez simplement le code de la doc. Par conséquent, cela ne fonctionnera pas non plus.

Le code correct pour faire fonctionner le bouton de suppression lorsque vous écrasez le téléchargement du modèle est

 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 = $( '
' + (file.error ? '
' : '') + 'Delete
'); //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($('').text(file.name)); if (file.thumbnailUrl) { row.find('.preview').append( $('').append( $('').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; } });