gpt4 book ai didi

javascript - 如何在javascript中添加一张又一张的图片

转载 作者:行者123 更新时间:2023-12-01 03:04:17 26 4
gpt4 key购买 nike

我正在编写一段代码,通过单击按钮将多个图像依次添加到 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>

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

最佳答案

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");

关于javascript - 如何在javascript中添加一张又一张的图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46300826/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com