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

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

Ho un controllo del 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, è ansible?

Ho provato come sotto

  $("#fileToUpload")[0].files[0]  

Di seguito è lo screenshot dell’object ma non sono in grado di modificarlo

inserisci la descrizione dell'immagine qui

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

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

  1. Aggiungi normale listener di eventi di modifica dell’input di file
  2. Effettua il ciclo di ogni file dall’evento di modifica, filtra per la convalida desiderata
  3. Spingere file validi in un array separato
  4. Utilizzare FileReader API FileReader per leggere i file localmente
  5. Invia file validi, elaborati al server

Gestore di eventi e codice loop 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 */ } }); }); 

Di seguito è riportata una versione più complicata del loop file che mostra come utilizzare l’API FileReader per caricare il file nel browser e, facoltativamente, FileReader a un server come blob con codifica Base64.

  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 caucanvas sull’utilizzo dell’API FileReader . Base64 che codifica un file aumenterà le sue dimensioni di circa il 30%. Se ciò non è accettabile, dovrai provare qualcos’altro.

Ho pensato che dovrei aggiungere qui il mio commento qui (ho risposto qui: JavaScript cancella il file da FileList per essere caricato )

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

  

Probabilmente considererai l’idea di creare più file di input anziché text di input o hidden . Questo non funzionerà perché non possiamo assegnargli un valore.

Questo metodo includerà il file di input nei dati inviati al database e per ignorare il file di input che potresti:

  • nel back-end non considerare il campo;
  • è ansible impostare l’attributo disabled sul file di input prima di serializzare il modulo;
  • rimuovere l’elemento DOM prima di inviare i dati.

Quando si desidera eliminare un file, basta 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 un array ogni volta che il file di input triggers l’evento change .

Professionisti:

  • Questo ti darà un sacco di controllo e potrai filtrare, confrontare i file, verificare la dimensione del file, il tipo MIME e così via ..

html

   

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); }