Wie Sie Dateien im Eingangstyp Datei mehrere vor dem Hochladen anhängen

Question

Ich möchte fragen, wie Sie Dateien in Eingangstyp Datei mehrere anfügen, wenn ein Benutzer wählt Bilder mehr als einmal vor dem Hochladen zum Beispiel ich wählt 2 Bilder und wieder wähle ich 3 Bilder Zum zweiten Mal vor dem Hochladen werden die ersten beiden aus der Eingabe-Typ-Datei entfernt und die letzten 3 Bilder sind immer noch da. Ich kenne ein Standardverhalten der Eingabetyp-Datei, die die neuen Dateien durch neue ersetzt, aber ich möchte alle Dateien Benutzer behalten wähle mehrfach vor dem upload wie ist es möglich ich benutze ajax und formdata aber es funktioniert nicht bitte hilf mir. Dank

Answer 1

Ich habe Gesicht gleiches Problem wie du

jetzt habe ich Lösung für diese richtig in meiner Seite

<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> 

das funktioniert finde ich wünsche dies auch für Sie auch

nützlich sein wird

Answer 2

Sie können bootstrap-fileinput installieren, es hat alle Funktionen, die Sie wollen, mit fantastischem Design.

Answer 3

Ich weiß, dass ich die Regeln verletze, aber die answer, die oben für diese Frage gewählt wurde, ist falsch. Ich habe nicht genug Reputation, um zu kommentieren, deshalb schreibe ich es als eine andere Antwort. Diese Linie $("input[name=replyfiles]").val(storedFiles); wirft ein Fehler als Eingabetyp-Datei nicht durch Javascript, modifiziert werden kann (außer es Zurücksetzen)

Answer 4

Der richtige Weg ist $("input[name=replyfiles]").clone().appendTo($("input[name=replyfiles]").parent()).val(''); $("input[name=replyfiles]").hide(); außer $("input[name=replyfiles]").val(storedFiles); zu verwenden.