jqueryでの画像複数追加

Question

jqueryを使った選択した画像の表示について教えていただければ幸いです。

<script>
　$(function() {
　　$('#imagefile').on('change', function() {
　　　var IMGFILE = $('#imagefile').prop('files')[0];
　　　var fileReader = new FileReader();
　　　fileReader.readAsDataURL(IMGFILE);
　　　fileReader.onload = function (ev) {
　　　　$('#imagearea').attr("src", ev.target.result);
　　　};
　　});
　});
</script>

<form id="image">
 <input type="file" accept="image/*;capture=camera" name="imagefile" id="imagefile">
</form>

<img id="imagearea">

このようにしますと、<img id="imagearea">の部分に選択した画像を表示してくれます。
再度、ファイルを選択（id="imagefile"）をクリックして画像を選択すると、<img id="imagearea">の部分に表示される画像が変わります。

やりたい事としましては、
<img id="imagearea">の部分の画像が変更されるのではなく、
画像を選択するたびにどんどん下に画像が追加されていくようにしたいのですが、
イメージとしては、
<img id="imagearea">
<img id="imagearea">
<img id="imagearea">
というように下に増えていくイメージ
これはどのように実現したらよいでしょうか。

よろしくお願いいたします。

Answer 1

　　　　$('#imagearea').attr("src", ev.target.result);

このコードは特定の1つの<img>を参照しているので、何度呼ばれても画像は上書きになります。
ここが呼ばれるたびに<img>を生成する必要があります。たとえば、

• <img id="imagearea"> を <div id="imagearea"></div> に変更する
• $('#imagearea').append() で '<img src="' + ev.target.result + '">' を追加する

Comments

[norihiko]

ありがとうございます！
ご案内いただいた方法で、無事やりたいことができました！
大変助かりました。

Answer 2

<img id="imagearea">

<img id="imagearea"> <img id="imagearea">

id重複不可なので、この形を目指す限り正しく動かないかと。
id重複を解消したうえで、何かしらのブロック要素に対してimgをappendしていけば良いのではないでしょうか。