0

[ここ][1]にアクセスできるアプリケーションがあります。アプリケーションを開くと、上部に [追加] ボタンが表示されます。これを 2 回クリックすると、2 つのテーブル行が表示され、各行に独自のファイル入力が含まれます。

問題は、2 行目のファイル入力でファイル (高速アップロード用の小さなファイル) をアップロードしようとしたとします。ファイルをアップロードすると、アップロードされたファイルの名前が 1 行目と 2 行目に追加されます。これは正しくありません。2 行目のファイル入力を使用してそのファイルをアップロードしたため、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' を持つ任意の要素」のセレクターです。[追加] を 2 回クリックしたため、このクラスには 2 つの要素があり、セレクターはそれらの両方に一致 (および追加) します。

追加にはより具体的なセレクターを使用してください。これで準備完了です。

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 に答える