Supprimer des fichiers par programmation avec jquery fileupload basic

Je suis en utilisant le blueimp de téléchargement de fichiers plugin (la version de base) à mettre en œuvre multifichier télécharger. Je suis en train de mettre en œuvre la fonctionnalité pour permettre à l'utilisateur de supprimer les fichiers en file d'attente pour le téléchargement. Je ne peux pas comprendre comment accéder aux fichiers de la matrice de façon appropriée. À chaque fois, dans le complément de rappel, l'indice est égal à 0 et les fichiers de la matrice de longueur est de 1 (il ne contient que les fichiers de l'utilisateur a cliqué pour l'enlever). Je suis en ajoutant un lien pour chaque fichier en file d'attente pour un div, qui est cliquable et devrait supprimer le fichier si vous cliquez dessus.

Ma pensée a été de créer un lien supprimer le lien avec l'index du fichier et de le retirer de la pile, mais parce que le problème mentionné ci-dessus, l'indice n'est jamais correct. J'ai aussi essayé par nom de fichier, mais le nom de fichier dans le "on" de rappel est toujours le premier fichier qui a été sélectionné pour le téléchargement - certains de fermeture de portée je dois trouver.

Comment puis-je supprimer par programme les 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 l'upload d'un fichier 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();
    });              
});

source d'informationauteur Furynation

  1. 15

    J'ai résolu ce problème. Voici la solution avec description:

    J'ai trouvé ma solution après bricoler avec elle un peu plus. La clé était de se souvenir que j'étais dans un appel de retour. Ainsi, dans le gestionnaire d'événement pour la fonctionnalité de suppression, j'ai juste effacé les données.les fichiers de tableau, et dans le présenter pour ce gestionnaire, je ne soumettre que si les fichiers matrice a une longueur supérieure à 0. J'ai nettoyé la fonction de gestionnaire d'événement de sorte qu'il est plus facile sur les yeux. HTML est inchangé.

    JavaScript code de gestion:

     $('#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();
                        }                                                    
                    });
            }
});
  2. 4

    Merci @Furynation.

    Ce que j'ai fait était similaire à votre approche. Pour chaque fichier que je sélectionnez-je ajouter une ligne à une table(pré-télécharger la présentation). Cette ligne-je attribuer aux données.contexte d'utilisation pour une utilisation ultérieure.

    Voir:
    https://github.com/blueimp/jQuery-File-Upload/issues/3083

    Mon bout de code est à ajouter le gestionnaire 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 la matrice.

    Si il y a une façon plus propre, s'il vous plaît laissez-moi savoir.

  3. 0

    Fonctionne pour moi pour plusieurs fichiers - il vérifie tous les fichiers et ne se casse pas lors de fichier avec l'erreur est dans le milieu de tous les fichiers (comme .splice() ou .lenght=0 faire). Idée est la suivante: faire la validation -> si l'erreur: marque d'index de fichier avec l'erreur -> après tous les fichiers de/avant de télécharger: enlever/supprimer des faux indices/fichiers par $.grep() -> télécharger les 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