mit Jquery Form Stecker in mehreren Formen

Question

Ich verwende die jQuery Formen stecken hier http://malsup.com/jquery/form/

Der Stecker in einem Fortschritt Prozentsatz zeigt, wenn die Datei hochgeladen werden. Aus irgendeinem Grund, egal welche Form ich verwende, zeigt der Fortschritt immer auf Form drei.

Mein HTML sieht aus wie dieses

<div id="bottomPics"> 
    <div class="bpThird"> 
     <div class="tPic"></div> 

     <form class="b3Form" id="b3f1" name="b3f1" action="cgi/bottom3uploader.exe" method="post" enctype="multipart/form-data" target="hiddenFrame"> 
      <input type="file" name="myfile"><br> 
      <input type="hidden" name="dzToken" id="dzToken"><br> 
      <input type="hidden" name="cID" value="1"><br> 
     </form> 
     <div class="btn b3u">upload</div> 

     <div id="progress1"> 
      <div id="bar1"></div> 
      <div id="percent1">0%</div> 
     </div> 
     <div id="status1">...</div>    

     <div class="tDesc"> 
      <div class="tdw">Description:</div><input type="text" id="t1Desc"> 
     </div> 
     <div class="tLink"> 
      <div class="tdw">Link:</div><input type="text" id="t1Link"> 
     </div> 
     <div class="tdw"></div><div class="btn" id="t1">save</div>    
    </div> 

    <div class="bpThird"> 
    <div class="tPic"></div> 

     <form class="b3Form" id="b3f2" name="b3f2" action="cgi/bottom3uploader.exe" method="post" enctype="multipart/form-data" target="hiddenFrame"> 
      <input type="file" name="myfile"><br> 
      <input type="hidden" name="dzToken" id="dzToken"><br> 
      <input type="hidden" name="cID" value="2"><br> 
     </form> 
     <div class="btn b3u">upload</div> 

     <div id="progress2"> 
      <div id="bar2"></div> 
      <div id="percent2">0%</div> 
     </div> 
     <div id="status2">...</div>       

    <div class="tDesc"> 
     <div class="tdw">Description:</div><input type="text" id="t2Desc"> 
    </div> 
    <div class="tLink"> 
     <div class="tdw">Link:</div><input type="text" id="t2Link"> 
    </div> 
    <div class="tdw"></div><div class="btn" id="t2">save</div>   
    </div> 

    <div class="bpThird"> 
    <div class="tPic"></div> 

    <form class="b3Form" id="b3f3" name="b3f3" action="cgi/bottom3uploader.exe" method="post" enctype="multipart/form-data" target="hiddenFrame"> 
     <input type="file" name="myfile"><br> 
     <input type="hidden" name="dzToken" id="dzToken"><br> 
     <input type="hidden" name="cID" value="3"><br> 
    </form> 
    <div class="btn b3u">upload</div> 

    <div id="progress3"> 
     <div id="bar3"></div> 
     <div id="percent3">0%</div> 
    </div> 
    <div id="status3">...</div>  

    <div class="tDesc"> 
     <div class="tdw">Description:</div><input type="text" id="t3Desc"> 
    </div> 
    <div class="tLink"> 
     <div class="tdw">Link:</div><input type="text" id="t3Link"> 
    </div> 
    <div class="tdw"></div><div class="btn" id="t3">save</div>   
    </div>  

</div> 

und ich den Stecker in wie dieser Paraphierung

var bar = ""; 
var percent = ""; 
var status = ""; 
var fName=""; 
var iStr=""; 

for(var i=1;i<=3;i++){ 

     iStr=i.toString(); 

     bar = $("#bar"+iStr); 
     percent = $("#percent"+iStr); 
     status = $("#status"+iStr); 
     fName="b3f"+iStr; 

    $("#"+fName).ajaxForm({ 
     beforeSend: function() { 
      status.empty(); 
      var percentVal = '0%'; 
      bar.width(percentVal); 
      percent.html(percentVal);   
     }, 
     uploadProgress: function(event, position, total, percentComplete) { 
      var percentVal = percentComplete + '%'; 
      bar.width(percentVal); 
      percent.html(percentVal); 
     }, 
     complete: function(xhr) { 
      status.html(xhr.responseText); 
     } 
    }); 
}  

warum der Status und der Prozentsatz immer zeigen sich auf der 3. Form?

Answer 1

So habe ich es behoben. Anstatt die Bindungen zu loopen, habe ich sie 500ms voneinander entfernt.

var func="bindBPupload('1')"; 
    window.setTimeout(func, 500); 

    func="bindBPupload('2')"; 
    window.setTimeout(func, 1000); 

    func="bindBPupload('3')"; 
    window.setTimeout(func, 1500);  

die Funktion:

function bindBPupload(iStr){ 

    var bar = $("#bar"+iStr); 
    var percent = $("#percent"+iStr); 
    var status = $("#status"+iStr); 
    var fName="b3f"+iStr; 

    percent.html("0%");  

     $("#"+fName).ajaxForm({ 
      beforeSend: function() { 
       status.empty(); 
       var percentVal = '0%'; 
       bar.width(percentVal); 
       percent.html(percentVal);   
      }, 
      uploadProgress: function(event, position, total, percentComplete) { 
       var percentVal = percentComplete + '%'; 
       bar.width(percentVal); 
       percent.html(percentVal); 
      }, 
      complete: function(xhr) { 
       status.html(xhr.responseText); 
      } 
     });  

}