2

ここに、ユーザーが行を追加してファイル入力を表示できるアプリケーションがあります。

ファイル入力をクリアしようとすると、2つの問題が発生します。

問題1：アプリケーションに2行を追加し、両方のファイル入力を入力して、いずれかの行の[ファイルをクリック]ボタンをクリックすると、行内のファイルをクリアする代わりに、すべてのファイルがクリアされます正しくない行は、ファイルをクリアしたい行内のファイルをクリアする必要があります。

問題2：[アップロード]ボタンをクリックしてファイルをアップロードしようとした後、アップロードが成功したかどうかにかかわらず、別のファイルを選択してから[ファイルのクリア]をクリックしてクリアしようとすると、クリアされませんまったくファイル。

これらの問題の両方をどのように修正できますか？

<script type="text/javascript">
 var sourceImageForm; 

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='startImageUpload(this);' class='imageuploadform' >" + 
    "<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><label>" + 
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>" + 
    "(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label>" + 
    "<input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" + 
    "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px;solclass #fff;'></iframe></form>");      

    $image.append($fileImage);

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

      $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
});

}

function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;
      return true;
}

function stopImageUpload(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/>';
      }
      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" type="file"/></label><br/><label>(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');     
      return true;   
}

</script>
4

2 に答える 2

0

問題1は、次の行が原因で発生します。

$(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

つまり、[ファイルのクリア]ボタンをクリックすると、ボタンと同じフォームに属する要素だけでなく、クラス「fileImage」を持つすべての要素が置き換えられます。次のように置き換えると機能するはずです。

 $(this).parents("form:first").find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

私がjqueryセレクターで行っているのは、最初にボタンがクリックされたフォームを選択し、次にそのフォーム内の「fileImage」要素を見つけることです。

于 2012-04-10T13:18:15.440 に答える
0

以下のコードは、クラスを指しているときにページに存在するすべてのファイル入力をクリアします

 $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage'   
      />");
  });

と置換する

$(".imageClear").click(function(event){
  event.preventDefault();
  $(this).closest(".fileImage").replaceWith("<input type='file' class='fileImage'    
    name='fileImage'/>");
  });

私はそれがうまくいくことを願っています...

于 2012-04-10T13:10:04.457 に答える