Question

在我的评论上传图片系统中，浏览图片并显示它。如果我在评论中浏览图像，它还会显示所有其他评论的显示字段。是否可以仅通过自己的$ id分别显示每个评论的浏览图像。

（N.B。评论字段按其自己的$ id显示/隐藏，此处删除以供使用）

我的预览图像脚本是：

//preview image
$(".repfile").change(function(){
    previewPic(this);
});

function previewPic(input) {
 if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $(".preview_rep").attr('src', e.target.result);
        $(".output_rep").show();
        $(".replycom").focus();
        $('#img').hide();
    };
    reader.readAsDataURL(input.files[0]);
 }
}

和php上传表单：

<div align="left" id="show_img_upload_rep" class="show_img_upload_rep" style="padding-top:5px; display:none">
<div class="upfrmrep" >
  <div class="output_rep" style="display:none;">
  <img class="preview_rep" src="" alt="No Image Found"/>
  </div>
      <form action="uploadpostimg.php" class="upload_Reply" method="post" enctype="multipart/form-data">
      <label for="file" style="font-size:12px;font-weight:bold;">Filename (Max 200 Kb) :  </label>
      <input type="file" name="file" class="repfile" id="'.$id.'" value=""/> 
      <img class="loading" src="loader.gif" alt="" style="margin:5px;display:none;"/>
      <input type="submit" class="upload_file" name="upload_btn" value="Upload Picture"/>
      </form>
   </div></div>

现在我想为每个预览使用$ id，如下所示：

PHP

//Preview want to Add '.$id.'
  <div class="output_rep'.$id.'" style="display:none;">
  <img class="preview_rep'.$id.'" src="" alt="No Image Found"/>
  </div>

我尝试过的脚本（可能是错的）无效

//preview image
$(".repfile").change(function(){
    var ID = $(this).attr('id').replace('','');
    previewPic(this);
});

function previewPic(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function (e) {
        $(".preview_rep"+ID).attr('src', e.target.result);
        $(".output_rep"+ID).show();
        $(".replycom").focus();
        $('#img').hide();
    };
    reader.readAsDataURL(input.files[0]);
  }
}

Answer 1

由于我将元素传递给另一个函数，我可以从那里获取ID。无需在更改处理程序中获取ID。

卸下：

var ID = $(this).attr('id').replace('','');

变化：

$(".preview_rep"+ID).attr('src', e.target.result);
$(".output_rep"+ID).show();

要：

$(".preview_rep" + input.id).attr('src', e.target.result);
$(".output_rep" + input.id).show();

为每个评论分别按其自己的ID预览图像

1 个答案: