come aggiungere file nel file di tipo input multipli prima di caricare

Question

Voglio chiedere come aggiungere file in tipo file di input multipli quando un utente seleziona le immagini più di una volta prima di caricare ad esempio seleziono 2 immagini e di nuovo seleziono 3 immagini la seconda volta prima del caricamento, i primi due vengono rimossi dal file di input e le ultime 3 immagini sono ancora lì, so che è un comportamento predefinito del file di tipo input che sostituisce i nuovi file con quelli selezionati ma voglio mantenere tutti i file utente seleziona più volte prima di caricare come è possibile sto usando ajax e formdata ma non funziona, per favore aiutami. Grazie

Answer 1

ho volto lo stesso problema come te

ora ho trovato una soluzione per questo

<input type="file" id="attachfile" name="replyFiles" multiple> <!--File Element for multiple intput--> 
<div id="#filelist"></div> 
<script> 
    var selDiv = ""; 
    var storedFiles = []; //store the object of the all files 

    document.addEventListener("DOMContentLoaded", init, false); 

    function init() { 
     //To add the change listener on over file element 
     document.querySelector('#attachfile').addEventListener('change', handleFileSelect, false); 
     //allocate division where you want to print file name 
     selDiv = document.querySelector("#filelist"); 
    } 

    //function to handle the file select listenere 
    function handleFileSelect(e) { 
     //to check that even single file is selected or not 
     if(!e.target.files) return;  

     //for clear the value of the selDiv 
     selDiv.innerHTML = ""; 

     //get the array of file object in files variable 
     var files = e.target.files; 
     var filesArr = Array.prototype.slice.call(files); 

     //print if any file is selected previosly 
     for(var i=0;i<storedFiles.length;i++) 
     { 
      selDiv.innerHTML += "<div class='filename'> <span> " + storedFiles[i].name + "</span></div>"; 
     } 
     filesArr.forEach(function(f) { 
      //add new selected files into the array list 
      storedFiles.push(f); 
      //print new selected files into the given division 
      selDiv.innerHTML += "<div class='filename'> <span> " + f.name + "</span></div>"; 
     }); 

     //store the array of file in our element this is send to other page by form submit 
     $("input[name=replyfiles]").val(storedFiles); 
} 
</script> 

questo sta lavorando nella mia pagina correttamente Vorrei che questo è anche essere utile per voi anche

Answer 2

È possibile installare bootstrap-fileinput, ha tutte le funzionalità che si desidera, con un design eccezionale.

Answer 3

So che sto violando le regole ma il answer che è votato in alto per questa domanda è sbagliato. Non ho abbastanza reputazione per commentare, è per questo che lo sto scrivendo come un'altra risposta. Questa linea $("input[name=replyfiles]").val(storedFiles); genera un errore nel formato tipo di ingresso non può essere modificato tramite JavaScript (tranne resettarlo)

Answer 4

Il modo corretto è utilizzare $("input[name=replyfiles]").clone().appendTo($("input[name=replyfiles]").parent()).val(''); $("input[name=replyfiles]").hide(); tranne $("input[name=replyfiles]").val(storedFiles);.