Implémentation de boutons de suppression pour jQuery-File-Upload

J’aborde peut-être cette idée avec une idée totalement fausse, alors laissez-moi d’abord expliquer ma situation.

Ce que j’essaie de réaliser avec jQuery-File-Upload est de permettre à l’utilisateur de sélectionner les fichiers qu’il choisit de télécharger. Ils seront autorisés à sélectionner plusieurs fichiers. Pour le moment, peu importe le type, ils téléchargeront principalement des images. Les fichiers sélectionnés apparaîtront dans une liste avec un bouton “Supprimer” à droite du nom de fichier pour chaque fichier. Comme illustré ci-dessous.

Configuration de base de jQuery-File-Upload

Comment puis-je mettre en œuvre un moyen permettant à l’utilisateur de supprimer le fichier qu’il a sélectionné dans la liste des fichiers en attente de téléchargement?

Une fois que l’utilisateur est à l’aise avec sa sélection de fichiers, il cliquera sur le bouton “Démarrer le téléchargement” qui lancera le téléchargement des fichiers contenus dans la liste et déclenchera la barre de progression illustrée ci-dessus.

J’ai moi-même essayé de résoudre certains problèmes, notamment la déconnexion d’événements qui se produisent lorsque l’utilisateur clique sur le bouton, mais je ne parviens pas à le supprimer de la liste des fichiers sélectionnés pour le téléchargement. Je sais qu’il y a un rappel automatique, mais je ne sais pas si c’est ce que je devrais utiliser.

Ci-dessous mon code.

 $(function () { $('#fileupload').fileupload({ dataType: 'json', url: '../php/', add: function (e, data) { //$.each(data.files, function(index, file) { data.context = $('') //.html(file.name+"") // see https://stackoverflow.com/questions/26234279/blueimp-jquery-upload-multiple-files-doesnt-work for the reason for the line below .html(data.files[0].name+"") .appendTo(".list-group"); /*$('.btn-danger').on('click', function() { console.log('Drop '+file.name+' \n'); });*/ //}); $('.btn-danger').on('click', function(e, data) { //console.log("Removing all objects...\n"); //data.context.remove(data.files[0].name); //data.context.remove(data.files[0]); e.preventDefault(); /*var filename = $(this).parent().text(); console.log("Filename: "+filename); data.context.remove(data.files.filename); console.log("Clicked the drop button");*/ try { // here I try thinking that I can call the drop() callback but I'm still trying to wrap my head around how this all works. drop(e, data); } catch(error) { console.log("The error was: "+error); } }); }, submit: function (e, data) { $('#start-upload').on('click', function() { //$('#start-upload').addClass('#disabledInput'); console.log("This is the start upload button!"); }); }, done: function (e, data) { /*$.each(data.result.files, function (index, file) { $('').text(file.name).appendTo('.files').find('#panel-body'); });*/ }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); }, drop: function (e, data) { $.each(data.files, function (index, file) { //$('.btn-danger').on('click', function() { console.log('Dropped file: '+ file.name +'\n'); //}); }); } }).on('.fileuploadsubmit', 'click', function(e, data) { console.log("Submit button pressed."); //data.formData = data.context.find(':input').seralizeArray(); }); });

Enfin, tout cela doit-il être placé dans mon $(document).ready ?

Je me rends bien compte que ceci est peut-être une ré-publication de ce post mais ce sont deux questions en une où je me suis dit que je le subdivisais en problèmes plus petits.

Abandonner le téléchargement par événement de clic

Je dois d’abord vous dire que j’ai construit quelque chose de similaire à vous. Après cela, je me suis posé les mêmes questions et je me suis retrouvé ici. Malheureusement, je devais m’aider moi-même et le résoudre.

Votre problème de base est que vous utilisez une signature de méthode pour l’événement click ( function(e, data) ) qui écrasera la signature de la méthode add contenant ( function(e, data) ). Ainsi, pendant que vous tentiez de supprimer le contexte de données, vous modifiiez réellement les données de l’événement click. Il suffit donc de laisser les variables (ou de les renommer) dans l’événement click, car dans votre exemple, vous n’en avez pas besoin.

Après cela, vous finissez par essayer de “détruire” proprement les téléchargements. J’ai compris, c’est propre de les abandonner d’abord et de désactiver toute soumission ultérieure.

Voici un exemple de code de travail qui devrait répondre à vos besoins et comporter des commentaires explicites:

 add: function (e, data) { // Append data context to collection. data.context = $(''+data.files[0].name+'') .appendTo('.list-group'); // Search in the children of the data context for the button // and register the click event. data.context.children('button') .click(function () { // This button will be disabled. $(this).addClass('disabled'); // Abort the data upload if it's running. data.abort(); // Overwrite the plugin's default submit function. data.submit = function () { return false; }; // Optional: Remove the data context (thus from collection). //data.context.remove(); }) ; },

Conseil supplémentaire: n’utilisez pas de guillemets doubles pour JavaScript car vous devez les échapper dans le balisage HTML.

Comment charger le JavaScript

Cette question est beaucoup plus complexe que prévu. C’est une discussion sans fin entre le balisage HTML conformité / clean et le chargement de page. Lorsque vous choisissez une direction, vous vous retrouvez avec un autre choix entre onload-events et jQuery. Vous devriez ouvrir une autre question ou essayer de trouver une question connexe. Ce faisant, je suis d’accord pour placer vos scripts dans une fonction propre et anonyme, qui est automatiquement chargée une fois le document prêt: $(function() { /*yourcontent*/ }); .

Selon la documentation du plugin, il devrait y avoir une méthode .destroy, mais la documentation est assez floue sur la façon de l’initialiser, ou si elle doit détruire un fichier du tableau, ou simplement détruire le formulaire entier. Il devrait y avoir un moyen, du moins théoriquement.

Pour la deuxième partie, oui. Votre code doit être dans un initialiseur jQuery tel que $(document).ready ou le plus populaire $(function() {});