單擊按鈕時，創建一個div，上傳圖像，並將該圖像放入div。 （可以做多次）。我該如何做到這一點？

Question

到目前爲止，我已經創建了一個div和一個圖像。但是，圖像包含一個ID。第一次，它創建一個DIV並向它添加一個圖像。但是當你再次點擊按鈕（fileupload按鈕）時，它只會改變第一個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]); 
    } 
}