ボタンをクリックすると、divを作成し、画像をアップロードし、その画像をdivに配置します。 （複数回行うことができます）。これをどのように達成するのですか？

Question

これまではdivと画像を作成しました。しかし、画像にはIDが含まれています。初めて、DIVを作成し、それにイメージを追加します。しかし、ボタン（ファイルアップロードボタン）をもう一度クリックすると、作成された最初のdivの画像だけが変更されます。

サイドノート：main2は私が作成したdivを追加しようとしているDIVです。作成したのdivのを含んでいます

メインのdiv：

<div id="main2"> 

入力ボタン：

<input type='file' id="imgInp" onchange="readURL(this);"/> 

機能：

function readURL(input) { 

    var newDiv = document.createElement('div'); 
    newDiv.setAttribute('class', 'main2div') 
    var newImg = document.createElement('img'); 
    newImg.setAttribute('id', 'newimg') 
    var addHere = document.getElementById('main2'); 
    addHere.appendChild(newDiv); 
    newDiv.appendChild(newImg); 

     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       document.getElementById('newimg').src = e.target.result; 

      } 
      reader.readAsDataURL(input.files[0]); 
    } 
} 

Answer 1

あなたが動的に新しいIDを毎回作成する必要があります。

var idseq=0; 
function readURL(input) { 

    var containerId = 'insertedImage-'+idseq; 
    idseq++; 

    var newDiv = document.createElement('div'); 
    newDiv.setAttribute('class', 'main2div') 
    var newImg = document.createElement('img'); 
    newImg.setAttribute('id', containerId) 
    var addHere = document.getElementById('main2'); 
    addHere.appendChild(newDiv); 
    newDiv.appendChild(newImg); 

     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       document.getElementById(containerId).src = e.target.result; 

      } 
      reader.readAsDataURL(input.files[0]); 
    } 
}