0

我有一个应用程序，您可以在此处访问。如果您打开应用程序，请单击“添加”按钮几次。这将在下表中添加一个新行。在每个表格行中都有一个 AJAX 文件上传器。

现在的问题是，如果我单击除第一行以外的任何行中的“上传”按钮，则上传仅发生在第一行，因此仅上传第一个文件输入。

为什么要这样做，我怎样才能得到它，以便当用户单击“上传”按钮时，“上传”按钮的那一行中的文件输入被上传，而不是第一行被上传？

下面是完整的代码，它在每个表行中附加上传的文件 AJAX 文件：

function insertQuestion(form) {   

    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 


    var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload();' >" + 
    "<p id='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p id='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe id='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px solid #fff;'></iframe></form>");

    $image.append($fileImage);

    $tr.append($image);  
    $tbody.append($tr); 

}

function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      document.getElementById('f1_upload_form').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      document.getElementById('f1_upload_form').style.visibility = 'visible';      
      return true;   
}

更新：

当前代码：

 var $fileImage = $("<form action='upload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startUpload(this);' >" + 
    "<p class='f1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='f1_upload_form' align='center'><br/><label>" + 
    "File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label><input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px solclass #fff;'></iframe></form>");

function stopUpload(success, source_form){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
      }
      $(source_form).find('.f1_upload_process').style.visibility = 'hidden';
      $(source_form).find('.f1_upload_form').innerHTML = result + '<label>File: <input name="fileImage" type="file"/><\/label><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /><\/label>';
      $(source_form).find('.f1_upload_form').style.visibility = 'visible';      
      return true;   
}

为什么我在下面的这一行出现错误：

$(source_form).find('.f1_upload_form').style.visibility = 'visible';
4

1 回答 1

0

如果没有看到完整的内容，您的问题似乎是您正在使用 ID，它在一个文档中必须是唯一的。如果多个元素使用相同的 ID，在最好的情况下，浏览器将使用第一个（它在这里使用），在最坏的情况下，什么都不会起作用。

添加新的上传表单时，您必须为其中的元素提供唯一 ID。你可以简单地通过附加一个计数变量来做到这一点window，例如

$(document).ready( function(){ window.formCount=0; } );

然后，您可以将该编号添加到新添加表单的 ID 中。

除此之外，通过使用this变量，您可以携带对正确表单的引用，例如onsubmit='startUpload(this);'，以及function startUpload(f){... 您应该能够使用 访问表单中的内容$(f).find(...)。

有很多方法可以完成这项工作并解决多个 ID 的问题。我会做什么：var $fileImage = $("<form action...在这种形式中，它说id我会改用class. 然后如上所述，通过在括号中添加“this”来更改 onsubmit（在同一行中）。然后将函数 startUpload 更改为此处：

function startUpload(source_form){
  $(source_form).find('.f1_upload_process').css('visibility','visible');
  $(source_form).find('.f1_upload_form').css('visibility','hidden');
  return true;
}

对于其他要访问发送文件的表单中的内容的函数，您必须执行相同的操作。将表单的引用传递给this函数调用的方括号中的函数，然后访问表单内的内容，如我上面所示。

于 2012-04-07T23:25:40.557 回答