Supprimer des fichiers par programme avec jquery fileupload basic
J'utilise le plug-in de téléchargement de fichiers blueimp (la version de base) pour implémenter le téléchargement multifile. J'essaie d'implémenter une fonctionnalité permettant à l'utilisateur de supprimer les fichiers en file d'attente pour le téléchargement. Je n'arrive pas à comprendre comment accéder au tableau de fichiers de manière appropriée. Chaque fois que vous ajoutez un rappel, l'index est 0 et la longueur du tableau de fichiers est 1 (il ne contient que le fichier que l'utilisateur a cliqué pour supprimer). J'ajoute un lien pour chaque fichier en file d'attente à une div, qui est cliquable et doit supprimer le fichier si on clique dessus.
Mon idée était simplement de créer un lien de suppression avec l'index du fichier et de le supprimer du tableau, mais en raison du problème mentionné ci-dessus, l'index n'est jamais correct. J'ai également essayé par nom de fichier, mais le nom de fichier dans le rappel "on" est toujours le premier fichier qui a été sélectionné pour le téléchargement - une certaine portée de fermeture que je dois comprendre.
Comment puis-je supprimer par programme des fichiers de la file d'attente de téléchargement?
HTML:
<div id="fileBrowserWrapper">
<form id="myForm" action="#" method="post" enctype="multipart/form-data">
<input id="uploadDocBrowse" type="file" name="files[]" multiple/>
</form>
</div>
<div id="inputFilesBox"></div>
<div id="uploadFilesBox"></div>
Et le fichier upload JavaScript:
$('#myForm').fileupload({
url: "/SomeHandler",
dataType: 'html',
autoUpload: false,
singleFileUploads: false,
replaceFileInput: false,
add: function (e, data) {
console.log("Number of files: " + data.files.length);
$.each(data.files, function (index, file) {
$('#uploadFilesBox').append("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>")
.on('click', { filename: file.name, files: data.files }, function(event) {
var uploadFilesBox = $("#uploadFilesBox");
var remDiv = $("#fileDiv_" + event.data.filename);
remDiv.remove();
event.data.files.splice(0, 1);
}
});
});
data.context = $('#myButton')
.click(function () {
data.submit();
});
});
J'ai résolu ça. Voici la solution avec description:
J'ai trouvé ma solution après avoir bricolé un peu plus. La clé était de me rappeler que j'étais en train de rappeler. Donc, dans le gestionnaire d'événements pour la fonctionnalité de suppression, je viens de mettre à zéro le tableau data.files, et dans la soumission pour ce gestionnaire, je ne le soumets que si le tableau de fichiers a une longueur supérieure à 0. J'ai nettoyé la fonction de gestionnaire d'événements afin c'est plus facile pour les yeux. HTML est inchangé.
Nouveau code de manipulation JavaScript:
$('#myForm').fileupload({
url: "/SomeUrl",
dataType: 'html',
add: function (e, data) {
$.each(data.files, function (index, file) {
var newFileDiv = $("<div class='uploadBox' id='fileDiv_" + file.name + "'><div class='leftEle'><a href='#' id='link_" + index + "' class='removeFile'>Remove</a></div><div class='midEle'>" + file.name + "</div></div>");
$('#uploadFilesBox').append(newFileDiv);
newFileDiv.find('a').on('click', { filename: file.name, files: data.files }, function (event) {
event.preventDefault();
var uploadFilesBox = $("#uploadFilesBox");
var remDiv = $(document.getElementById("fileDiv_" + event.data.filename));
remDiv.remove();
data.files.length = 0; //zero out the files array
});
data.context = newFileDiv;
});
$('#myButton')
.click(function () {
if (data.files.length > 0) { //only submit if we have something to upload
data.submit();
}
});
}
});
Merci pour cette @Furynation.
Ce que j'ai fait était semblable à votre approche. Pour chaque fichier que je sélectionne, j'ajoute une ligne à une table (soumission préalable au téléchargement). Cette ligne est affectée au data.context à utiliser pour une utilisation ultérieure.
Voir: https://github.com/blueimp/jQuery-File-Upload/issues/3083
Mon extrait de code est dans le gestionnaire d'ajout de rappel:
$("#upload").click(function () {
if (data.files.length > 0) {
data.submit();
}
});
data.context.find('a').on('click',function (event) {
event.preventDefault();
data.context.remove();
data.files.length = 0;
});
Cela supprime la ligne de la table et réinitialise le tableau.
S'il y a un moyen plus propre, s'il vous plaît faites le moi savoir.
Fonctionne pour moi pour plusieurs fichiers - il vérifie tous les fichiers et ne casse pas lorsque le fichier avec erreur se situe au milieu de tous les fichiers (comme .splice() ou .lenght=0 do). L'idée est: validation/> si erreur: marque l'index du fichier avec l'erreur -> après tous les fichiers/avant le téléchargement: supprime/supprime/supprime les index/fichiers erronés avec $.grep() -> télécharger de bons fichiers ensemble singleFileUploads: false.
$(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 - in example is only one: size
var uploadErrors = [];
// ... validation
// check size
if(data.files[index]['size'] > 1048576) {
uploadErrors.Push('Filesize is too big');
};
// ...
// when errors
if(uploadErrors.length > 0) {
// 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!') ;
// ...
});
} //
},
// ...
}); // << file_upload