append() in jquery Does'nt append zweiten Zeitdatei

Question

I eine Eingabe von Typ-Datei und eine versteckte Form darunter definiert haben,

<input type="file" name="attachment0" id="attachment0" custom-on-change="uploadfile" ng-show="attachFile" multiple/> 
<form class="hidden" id="myForm" method="post" enctype="multipart/form-data" action="SupportRequest">         
</form> 

"custom-on-change" eine Winkel Richtlinie, die Anrufe die Funktion uploadfile() nach dem Auswählen von Dateien. Mein Javascript sieht wie folgt aus:

var form = $('#myForm'); 
var n=0; 
$scope.attachFile = true; 

$scope.uploadfile = function() {           
       if(n == 0){ 
       var filein = $('#attachment0'); 
       form.append(filein); 
       $('#attachment0').test(); 
       } 
       else 
        { 
        if(n==1){ 
        var temp = "attachment0" + '_' + n; 
        var file_in = $('#'+temp); 
        form.append(file_in); 
        $('#'+temp).test();}       
        } 
      }; 

$.fn.test = function() { 
        return this.each(function(){ 
        n++; 
        $(this).attr('id', this.id + '_' + n); 
        $(this).attr('name', this.name + '_' + n); 
        }); 
      }; 

Ich versuche, Dateien zweimal an das Formular myForm anzufügen. Wenn ich Dateien zum zweiten Mal wähle, auch nach dem Anhängen, sehe ich, dass die zuvor angehängte Eingabe mit id = "attachment0" in myForm nicht vorhanden ist und die Eingabe von id = "attachment0_1" im Formular vorhanden ist. Hier versuche ich, mehrere Dateien mehrmals hochzuladen, deshalb ändere ich dynamisch die ID der Eingabe in test(). Ich möchte beide Eingabe mit ID attachment0 und attachment0_1 in myForm. Weiß jemand, wie das behoben werden kann? Und erkläre dieses Verhalten auch.

Answer 1

sieht aus wie in test Funktion Sie id ersetzen,

$(this).attr('id', this.id + '_' + n); 

Answer 2

würde, ist nicht besser sein ng-repeat zu benutzen? Etwas wie folgt aus:

Controller:

$scope.files = [...] // list of files 

$scope.uploadfile = function() {           
    // So stuff to get the file 
    $scope.files.push(filein); 
}; 

Html.

<!-- Inside the form --> 
<div ng-repeat="file in files">{{file}}</div> 

Answer 3

Ändern Sie den Code aus form.append (filein) form.append ($ ('# attachment0') Klon()).

Es funktioniert dann. Sie sollten die .clone() -Methode verwenden, um Elemente zu kopieren.

.append() bewegt sich nur das Element von einem Ort zum anderen aber zuerst erstellen die Kopie des Elements .clone() und dann fügen Sie es zu Ihrem Formular