需要推广jquery图像预览

我允许用户在保存到数据库之前查看上传的图像预览。 HTML代码是：

<div class="upload-preview">
  <img />
</div>
<input class="file" name="logo" type="file">

以上代码对于一个图像非常有效。 如果我想上传10张图片，我必须重复代码10次

我试图对其进行概括，但由于jquery代码依赖于html类，因此图像被上传到所有匹配的类

如果我使用一个ID，那么我必须为每个ID重复jquery代码

---

是否有任何方法可以概括此问题，以便它可以仅使用一个jquery函数预览多个图像。

通过以下方法更改HTML代码：

$(document).ready(function(){
var preview = $(".upload-preview img");

$(".file").change(function(event){
   var input = $(event.currentTarget);
   var file = input[0].files[0];
   var reader = new FileReader();
   reader.onload = function(e){
       image_base64 = e.target.result;
       preview.attr("src", image_base64);
   };
   reader.readAsDataURL(file);
  });
});

而JS代码由以下代码组成：

<div class="upload-preview" id="upload-preview">

</div>
<input class="file" name="logo" type="file"/>

$（文档）.ready（函数（）{
var预览=$（“#上传预览”）；
$（“.file”）.change（函数（事件）{
变量输入=$（event.currentTarget）；
var file=输入[0]。文件[0]；
var reader=new FileReader（）；
reader.onload=函数（e）{
image_base64=e.target.result；
预览。追加（“
”）；
};
reader.readAsDataURL（文件）；
});
});
}

在您的答案中，html中的上载按钮在哪里？如果我删除空图像标签，图像将如何预览？我想是的necessary@Ajey我刚刚修改了你的div代码，在div之后添加文件上传，jquery就可以工作了。先试试这个。谢谢你的努力。我几乎得到了我想要的东西。最后一个问题。当我附加图像时，我希望它们水平附加。到目前为止，它们是垂直附加的。知道如何实现吗？@Ajey使用这个

preview.append（
）替换代码中的这一行。@A非常乐意帮助您。
$(document).ready(function(){
var preview = $("#upload-preview");

$(".file").change(function(event){
   var input = $(event.currentTarget);
   var file = input[0].files[0];
   var reader = new FileReader();
   reader.onload = function(e){
       image_base64 = e.target.result;
       preview.append("<img src='"+image_base64+"'/><br/>");
   };
   reader.readAsDataURL(file);
  });
});
}