0

我有一个应用程序，您可以访问 [这里][1]。当您打开应用程序时，您会在顶部看到一个“添加”按钮，单击此按钮两次，您将看到 2 个表格行出现，每行包含它自己的文件输入。

问题是：假设您尝试在第二行的文件输入中上传一个文件（用于快速上传的小文件）。上传文件后，已上传文件的名称会附加到第一行和第二行。这是不正确的，它应该只在第二行附加文件名，因为您使用第二行的文件输入来上传该文件。

如何在用于上传文件的文件输入的同一行中附加文件名？

以下是包含文件输入的表单的代码：

 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='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>" + 
    "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
    "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
    "</p><ul class='listImage' align='left'></ul>" +
    "<iframe class='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 imageClickHandler(imageuploadform){ 
      if(imageValidation(imageuploadform)){ 
          return startImageUpload(imageuploadform); 
      } 
      return false;
  }

以下是文件上传开始和停止的位置：

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');

      return true;
}


    function htmlEncode(value) { return $('<div/>').text(value).html(); }


    function stopImageUpload(success, imagefilename){

          var result = '';

          if (success == 1){
             result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';      
              $('.listImage').append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage">Delete</button><br/><hr/></div>'); 
          }
          else {
             result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
          }

  $(".deletefileimage").on("click", function(event) {

    $(this).parent().remove();

});

    return true;

    }

正确的解决方案：

     function imageClickHandler(imageuploadform){ 
          if(imageValidation(imageuploadform)){ 
 window.lastUploadImageIndex = $('.imageuploadform').index(imageuploadform); 
              return startImageUpload(imageuploadform); 
          } 
          return false;
      }

         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage">Delete</button><br/><hr/></div>');
4

1 回答 1

1

你的基本问题是：

$('.listImage')

那是“任何具有类'listImage'的元素”的选择器。由于您单击了两次添加，因此此类有两个元素，并且您的选择器匹配（并附加）到这两个元素。

为您的追加使用更具体的选择器，您应该已准备就绪。

不幸的是，我不能推荐一种具体的方法，因为我不知道你的stopImageUpload函数是如何被调用的。如果它是由 jQuery 事件处理程序触发的，那么您可以在函数中引用“this”来获取触发事件的元素，并且您应该能够使用它来确定要附加到哪个 .listImage 。

如果它不是由事件处理程序触发的，那么我会想象任何调用它的函数都知道哪个文件输入触发了事情。

一旦你知道你真正想要附加到哪个元素，你就可以使用 jQuery 的 eq 方法/选择器来定位它。这里有几个例子：

$('.listImage:eq(0)') // selects the first listImage only
$('.listImage').eq(2) // selects the third listImage only
于 2012-05-01T00:12:36.703 回答