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

Preview image by its own id separately for each comment

本文关键字：id 自己的 图像 评论      更新时间：2023-09-26

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

（注意注释字段按其自己的$id显示/隐藏，此处删除以供使用）

这是我的工作 http://jsfiddle.net/er9e72ww/2/

我的预览图像脚本是：

//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]);
  }
}

由于我将元素传递给另一个函数，因此我可以从那里获取 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();
相关文章：