Question

我正在编写一个代码，通过单击按钮逐个将多个图像添加到DIV。代码如下。在这种情况下，图像将被替换，但是，我希望保留旧图像并附加新图像。

<html>  
    <body>  
        <form>
            <input id="inp" type='file'/>
            <div id="placehere"></div>
        </form>  
    </body>  
</html>

<script  language ="javascript">
    var elem = document.createElement("img");

    elem.setAttribute("height", "150");
    elem.setAttribute("width", "150");
    elem.setAttribute("alt", "Flower");

    function readFile() {

        if (this.files && this.files[0]) {

            var FR = new FileReader();

            FR.addEventListener("load", function (e) {
                document.getElementById("placehere").appendChild(elem);
                elem.src = e.target.result;
            });
            FR.readAsDataURL(this.files[0]);
        }
    }
    document.getElementById("inp").addEventListener("change", readFile);
</script>

如何添加新图像而不是替换现有图像？

Answer 1

function readFile() {

  if (this.files && this.files[0]) {
    var elem = document.createElement("img");

    elem.setAttribute("height", "150");
    elem.setAttribute("width", "150");
    elem.setAttribute("alt", "Flower");
    var FR = new FileReader();

    FR.addEventListener("load", function(e) {
      document.getElementById("placehere").appendChild(elem);
      elem.src = e.target.result;


    });

    FR.readAsDataURL(this.files[0]);
  }

}

document.getElementById("inp").addEventListener("change", readFile);

<form>
  <input id="inp" type='file' />
  <div id="placehere">
  </div>
</form>

您的代码存在的问题是每次用户上传文件时都必须创建图像标记。这就是我在readFile（）函数中移动代码的原因： -

    var elem = document.createElement("img");

  elem.setAttribute("height", "150");
  elem.setAttribute("width", "150");
  elem.setAttribute("alt", "Flower");

Answer 2

替换图像的原因是因为每次调用readFile时，您都会重复使用在脚本初始加载时创建的相同img元素（var elem = document.createElement("img")）。

解决方案是将document.createElement调用移动到readFile函数中，使您在每次调用时都创建一个新的图像元素。请参阅下面的修订代码。希望这有帮助！

function readFile() {

    if (this.files && this.files[0]) {

        var FR = new FileReader();

        FR.addEventListener("load", function(e) {

            var elem = document.createElement("img");

            elem.setAttribute("height", "150");
            elem.setAttribute("width", "150");
            elem.setAttribute("alt", "Flower");

            document.getElementById("placehere").appendChild(elem);
            elem.src = e.target.result;


        });

        FR.readAsDataURL(this.files[0]);
    }

}
document.getElementById("inp").addEventListener("change", readFile);

如何在javascript中一个接一个地添加图像

2 个答案: