0

私はここにアプリケーションを持っています：アプリケーション

以下の手順に従ってください。

  1. ボタンをクリックしてAdd Question、ファイル入力を下の表に追加します。

  2. ファイル入力アップロード2つの画像を（一度に1つずつ）使用することにより、画像が正常にアップロードされるたびに、アップロードされたファイルの名前がテーブルの下と下に表示され、テキスト入力でそのIDが表示されます。

  3. ここで問題が発生しましたRemove。アップロードした2番目のファイル名のボタンをクリックすると、関連付けられたファイル名と削除ボタンが正常に削除されますが、下にある両方のテキスト入力が削除されます。これは正しくありません。削除されたファイル名にIDが関連付けられているテキスト入力のみを削除する必要があります。

これが私の質問です。ユーザーがボタンをクリックしたRemoveときに、削除ボタンがクリックされたときにすべてのテキスト入力を削除するのではなく、削除されたファイル名に関連付けられたテキスト入力のみを削除するにはどうすればよいですか？

.hiddenimg以下は、ファイル入力とそれが以下のhtmlテーブルに追加される方法、およびテキスト入力を格納するdivを示すコードです。

Jqueryの追加ファイル入力フォーム：

function GetFormImageCount(){ 
  return $('.imageuploadform').length + 1;
}

function insertQuestion(form) {



    var $tbody = $('#qandatbl_onthefly > tbody');
    var $tr = $("<tr class='optionAndAnswer' align='center'>");
    var $image = $("<td width='17%' class='image'></td>");

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
        "<p class='imagef1_upload_form'><label>" +
        "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
        "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +
        "<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>" +
        "<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" +
        "</p><p class='imagemsg'></p><p class='listImage'></p>" +
        "<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");

    $image.append($fileImage);



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


}

ファイル入力フォームが追加され、テキスト入力が.hiddenimgdivタグに格納されるHTMLフォームとテーブル：

<form id="QandA" action="insertQuestion.php" method="post">


<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>

</div>
<hr/>

<table id="qandatbl" align="center" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
    <th width="17%" class="image">Image</th>
</tr>
</thead>
</table>
<div id="qandatbl_onthefly_container">
<table id="qandatbl_onthefly" align="center" cellpadding="0" cellspacing="0" border="0">
<tbody>
</tbody>
</table>
</div>

<div class="hiddenimg"><!-- All uploaded image file ids go here --></div>

</form>

以下は、ファイルアップロードのハンドラー、ファイルアップロードを開始する機能、そして重要なことに、ファイル名、テキスト入力、削除ボタンの表示を制御し、Removeボタンがクリック：

アップロードボタンハンドラー：

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

アップロードを開始します。

function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').show()
  $(imageuploadform).find('.imagef1_upload_form').hide();
  $(imageuploadform).find('.imagemsg').hide();
  sourceImageForm = imageuploadform;

      return true;
}

アップロードが終了しました：

 var imagecounter = 0;

function stopImageUpload(success, imageID, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';   
            $('.hiddenimg').eq(window.lastUploadImageIndex).append('<input type="text" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
            $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
         }

      $(sourceImageForm).find('.imagef1_upload_process').hide();
      $(sourceImageForm).find('.imagemsg').html(result);
      $(sourceImageForm).find('.imagemsg').show();
      $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
      $(sourceImageForm).find('.imagef1_upload_form').show();


  var _imagecounter = imagecounter;

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
    jQuery.ajax("deleteimage.php?imagefilename=" + $(this).attr('data-image_file_name')).done(function(data) {
        $(".imagemsg" + _imagecounter).html(data);
    });

    $(this).parent().remove();
    $(".hiddenimg input").remove();
});

      return true;   
}
4

1 に答える 1

0

もし私がそれをするなら、私はボタンの値として画像IDを追加し、それを取得し、関連する入力を削除します

$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename)
 + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '"  value="'+imageID+'">Remove</button>
<br/>
<hr/>
</div>')

次に、それをテキスト入力のIDとして、または名前やクラスなどに追加します

$('.listImage').eq(window.lastUploadImageIndex).find(".deletefileimage").on("click", function(event) {
    jQuery.ajax("deleteimage.php?imagefilename=" + $(this).attr('data-image_file_name')).done(function(data) {
        $(".imagemsg" + _imagecounter).html(data);
    });
var buttonid = $(this).attr(value) // or class or what ever
    $(this).parent().remove();
    $("#"+ buttonid  +"").remove(); // this will be the id of the text input (you allready have that in your application .
});
于 2013-01-24T17:20:36.530 に答える