Elimina i file a livello di codice con jquery fileupload basic

Question

Sto utilizzando il plug-in di caricamento del file blueimp (la versione di base) per implementare il caricamento multifile. Sto cercando di implementare funzionalità per consentire all'utente di rimuovere i file in coda per il caricamento. Non riesco a capire come accedere alla matrice di file in modo appropriato. Ogni volta nell'aggiunta del callback, l'indice è 0 e la lunghezza dell'array dei file è 1 (contiene solo il file che l'utente ha fatto clic per rimuovere). Sto aggiungendo un link per ogni file in coda a un div, che è cliccabile e dovrebbe rimuovere il file se cliccato.

Il mio pensiero era quello di creare un collegamento rimuovi con l'indice del file e rimuoverlo dall'array, ma a causa del problema indicato sopra, l'indice non è mai corretto. Ho anche provato con il nome del file, ma il nome del file nel callback "on" è sempre il primo file che è stato selezionato per il caricamento, alcuni ambiti di chiusura che devo capire.

Come rimuovere i file dalla coda di caricamento a livello di programmazione?

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> 

E il file di caricamento 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(); 
    });    
}); 

Answer 1

Ho risolto questo. Ecco la soluzione con la descrizione:

Ho trovato la mia soluzione dopo averlo armeggiato ancora un po '. La chiave stava ricordando che ero in una chiamata di ritorno. Quindi nel gestore di eventi per la funzionalità di rimozione, ho appena azzerato l'array data.files e nel submit per quel gestore, invio solo se l'array di file ha una lunghezza maggiore di 0. Ho ripulito la funzione del gestore di eventi in modo tale è più facile per gli occhi. L'HTML è invariato

Nuovo codice JavaScript di movimentazione:

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

Answer 2

funziona per me per più file - controlla tutti i file e non si rompe quando il file con l'errore è quello al centro di tutti i file (come .splice() o .lenght=0 do). Idea è: do convalida -> se di errore: Indice segno di file con errori -> dopo che tutti i file/prima di upload: rimuovere/eliminare gli indici errati/file da $.grep()-> caricare i buoni file insieme 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 

Answer 3

Grazie per questo @Furynation.

Quello che ho fatto è stato simile al tuo approccio. Per ogni file che seleziono, aggiungo una riga a una tabella (invio pre-caricamento). Questa riga lo assegno al data.context da usare per un uso successivo.

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

codice mio frammento è nel gestore aggiuntivo di callback:

$("#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; 
      }); 

Ciò elimina la riga della tabella e reimposta la matrice.

Se c'è un modo più pulito, per favore fatemelo sapere.