jquery - 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);
  });
});

上記のコードは、1 つの画像に対してうまく機能します。10 枚の画像をアップロードしたい場合、コードを 10 回繰り返さなければなりません。

一般化しようとしましたが、jquery コードは html クラスに依存するため、画像は一致するすべてのクラスにアップロードされます。

ID を使用する場合、ID ごとに jquery コードを繰り返す必要があります。

1 つの jquery 関数だけで複数の画像をプレビューできるように、この問題を一般化する方法はありますか。