Question

我有一个应用程序，您可以访问here。如果您打开该应用程序，请单击“添加”按钮几次。这将在下面的表格中添加一个新行。在每个表行中都有一个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';

Answer 1

如果没有看到完整的cose，您的问题似乎是您正在使用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将对表单的引用传递给函数，然后访问表单中的内容，如上所示。

它只上传第一行的文件输入

1 个答案: