Javascript 在其下方显示所选图片'；带多个按钮的s按钮

对不起，标题不太好。这就是我的目的。我试图打开一个openFileDialog，然后在该按钮下方显示我选择的图像。我可以用一个按钮和一个图像做得很好。但是，我似乎无法仅在适当的按钮下显示选定的图片。我的脚本看起来像这样

$（'.custom upload input[type=file]'）。更改（函数（）{
var parentCommentId=$（this）.id
$（this.next（）.find（'input'）.val（$（this.val（））；
if（this.files&&this.files[0]）{
var reader=new FileReader（）；
reader.onload=imagesisload；
reader.readAsDataURL（this.files[0]）；
}
函数imageIsLoaded（e）{
$（'img'）.attr（'src'，e.target.result）；
$（'img'）.fadeIn（）；
};
});
。自定义上载{
位置：相对位置；
高度：40px；
宽度：350px；
利润率：30像素；
}
.custom upload input[类型=文件]{
大纲：无；
位置：相对位置；
文本对齐：右对齐；
-moz不透明度：0；
过滤器：alpha（不透明度：0）；
不透明度：0；
z指数：2；
宽度：100%；
身高：100%；
}
.自定义上载.伪造文件{
背景：url(http://www.fold3.com/i/upload-icon.png)右中无重复；
位置：绝对位置；
顶部：0px；
左：0px；
宽度：350px；
填充：0；
保证金：0；
z指数：1；
线高：100%；
}
.自定义上载.伪造文件输入{
字体大小：16px；
高度：40px；
宽度：300px；
}



使用
$（“img”）
选择所有img元素。您需要使用从发生更改事件的输入获取相关img元素

$('.custom-upload input[type=file]').change(function() {
  var $this = $(this);  // store a reference to current input
  $this.next().find('input').val($(this).val());

  if (this.files && this.files[0]) {
    var reader = new FileReader();
    reader.onload = imageIsLoaded;
    reader.readAsDataURL(this.files[0]);
  }

  function imageIsLoaded(e) {
    $this.closest('.custom-upload')
         .find('img')
         .attr('src', e.target.result)
         .fadeIn();
  };
});

我已将当前文件输入的引用保存在（新）变量
$this
中。然后，在img onload处理程序中，我使用
.closest（）
向上导航到包含的div，然后使用
.find（）
向下导航到该div中的img

（您可以使用
$this.sibbines（“img”）
或
$this.next（）.next（）
，但这只适用于当前的特定html结构-使用
.closest（）
加上
。find（）
将起作用，即使您以后添加了额外的（子-）只要文件输入和img仍在同一个包含div的目录中，就可以围绕img使用容器div或以其他方式调整结构。）

演示：
您似乎没有使用
parentCommentId
，但如果您使用，您需要将
$（this.id
更改为
this.id
。为什么不直接使用文件上载
多个
？谢谢大家。我已经多年没有真正用javascript做过任何事情了。我感谢你的帮助。