需要泛化jquery图片预览

Question

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

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

我的 jquery 代码是：

$(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);
  });
});

上面的代码适用于一张图片。 如果我要上传 10 张图片，我必须重复代码 10 次。

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

如果我使用一个 ID，那么我将不得不为每个 ID 重复 jquery 代码。

有没有办法概括这个问题，以便它可以只用一个 jquery 函数预览多个图像。

Answer 1

通过以下方式更改您的 HTML 代码：

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

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

和这个的JS代码：

$(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);
  });
});
}