Question

我正在使用这里找到的jQuery表单插件 http://malsup.com/jquery/form/

插件显示上传文件时的进度百分比。出于某种原因，无论我使用哪种形式，进展总是显示在表格三上。

我的HTML看起来像这样

types

我正在按照这个

初始化插件

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

为什么状态和百分比总是显示在第3个表单上？

Answer 1

这就是我修复它的方法。我没有循环绑定，而是将它们分开500毫秒。

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

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

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

功能：

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

}

使用多种形式的jquery表单插件

1 个答案: