Come rimuovere un file specifico selezionato dal controllo del file di input

Question

Come rimuovere un file specifico selezionato dal controllo del file di input?

Ho un controllo file di input con l'opzione per selezionare più file; tuttavia, voglio convalidare un file e se ha un'estensione sbagliata, allora dovrei rimuovere quel file dal controllo file stesso, è possibile?

ho cercato, come di seguito

<input type="file" name="fileToUpload" id="fileToUpload" multiple/> 


<script> $("#fileToUpload")[0].files[0] </script> 

Di seguito è riportato lo screenshot dell'oggetto, ma io non sono in grado di modificare lo

Answer 1

Come altre persone sottolineato, FileList è di sola lettura. È possibile aggirare questo spingendo quei file in un separato Array però. Puoi quindi fare quello che vuoi con la lista dei file così curata. Se l'obiettivo è il caricamento su un server, è possibile utilizzare l'API FileReader.

Di seguito è riportato un modo per evitare completamente la necessità di modificare il FileList. Passi:

1. Aggiungi normale cambio di input file di listener di eventi
2. loop attraverso ogni file da evento change, filtro per la convalida desiderato
file validi
3. Spingere in array separato
4. Usa FileReader API per leggere i file in locale
5. Invia validi, file elaborati al server Handl

Event er e il codice del ciclo di file di base:

var validatedFiles = []; 
$("#fileToUpload").on("change", function (event) { 
    var files = event.originalEvent.target.files; 
    files.forEach(function (file) { 
    if (file.name.matches(/something.txt/)) { 
     validatedFiles.push(file); // Simplest case 
    } else { 
     /* do something else */ 
    } 
    }); 
}); 

Qui di seguito è una versione più complicata del ciclo di file che mostra come è possibile utilizzare l'FileReader API per caricare il file nel browser e, facoltativamente, lo sottopone ad un server come Base64 blob codificato.

files.forEach(function (file) { 
    if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side 
     var reader = new FileReader(); 
     // Setup listener 
     reader.onload = (function (processedFile) { 
     return function (e) { 
      var fileData = { name : processedFile.name, fileData : e.target.result }; 

      // Submit individual file to server 
      $.post("/your/url/here", fileData); 

      // or add to list to submit as group later 
      validatedFiles.push(fileData); 
     }; 
     })(file); 

     // Process file 
     reader.readAsDataURL(file); 
    } else { 
     /* still do something else */ 
    } 
    }); 

Una nota di cautela sull'utilizzo FileReader API. Base64 che codifica un file aumenterà le sue dimensioni di circa il 30%. Se ciò non è accettabile, dovrai provare qualcos'altro.

Answer 2

html

<input id="fileInput" name="fileInput" type="file" /> 
<input onclick="clearFileInput()" type="button" value="Clear" /> 

javascript

function clearFileInput(){ 
     var oldInput = document.getElementById("fileInput"); 

     var newInput = document.createElement("input"); 

     newInput.type = "file"; 
     newInput.id = oldInput.id; 
     newInput.name = oldInput.name; 
     newInput.className = oldInput.className; 
     newInput.style.cssText = oldInput.style.cssText; 
     // copy any other relevant attributes 

     oldInput.parentNode.replaceChild(newInput, oldInput); 
    } 

Answer 3

ho pensato che avrei dovuto aggiungere il mio commento qui e qui (ho risposto qui: JavaScript delete File from FileList to be uploaded)

Ho trovato una soluzione. Ciò non richiederà AJAX per la richiesta e il modulo può essere inviato al server. Fondamentalmente è possibile creare un input hidden o text e impostare l'attributo value sulla stringa base64 creata dopo aver elaborato il file selezionato.

<input type=hidden value=${base64string} /> 

Si dovrà probabilmente prendere in considerazione l'idea di creare file di input multiple invece di ingresso o di texthidden. Questo non funzionerà perché non possiamo assegnargli un valore.

Questo metodo includerà il file di input dei dati inviati al database e di ignorare il file di input si potrebbe:

• nel back-end non considerano il campo;
• è possibile impostare l'attributo disabled nel file di input prima di serializzare il modulo;
• rimuovere l'elemento DOM prima dell'invio dei dati.

Quando si desidera eliminare un file è sufficiente ottenere l'indice dell'elemento e rimuovere l'elemento di input (testo o nascosto) dal DOM.

Requisiti:

• è necessario scrivere la logica per convertire i file in Base64 e memorizzare tutti i file all'interno di una matrice ogni volta che il file di input attivano l'evento change.

Pro:

• Questo sarà essenzialmente dare un sacco di controllo e si può filtrare, confronto dei file, verificare la presenza di dimensione del file, il tipo MIME, e così via ..