Question

我有一个你可以访问[here] [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>');

Answer 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

如何在其所属的行中附加文件名？

1 个答案: