如何在javascript中逐个添加图像_Javascript_Jquery

如何在javascript中逐个添加图像

javascript jquery

如何在javascript中逐个添加图像,javascript,jquery,Javascript,Jquery,我正在编写一个代码，通过单击按钮将多个图像逐个添加到DIV中。代码如下。在这种情况下，图像将被替换，但是，我希望保留旧图像，并追加新图像 <html> <body> <form> <input id="inp" type='file'/> <div id="placehere"></div> </form>

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


var elem=document.createElement（“img”）；
元素设置属性（“高度”、“150”）；
元素设置属性（“宽度”、“150”）；
元素setAttribute（“alt”、“Flower”）；
函数readFile（）{
if（this.files&&this.files[0]）{
var FR=new FileReader（）；
FR.addEventListener（“加载”，功能（e）{
document.getElementById（“placehere”）.appendChild（elem）；
elem.src=e.target.result；
});
FR.readAsDataURL（this.files[0]）；
}
}
document.getElementById（“inp”）.addEventListener（“更改”，readFile）；

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

函数readFile（）{
if（this.files&&this.files[0]）{
var elem=document.createElement（“img”）；
元素设置属性（“高度”、“150”）；
元素设置属性（“宽度”、“150”）；
元素setAttribute（“alt”、“Flower”）；
var FR=new FileReader（）；
FR.addEventListener（“加载”，功能（e）{
document.getElementById（“placehere”）.appendChild（elem）；
elem.src=e.target.result；
});
FR.readAsDataURL（this.files[0]）；
}
}
document.getElementById（“inp”）.addEventListener（“更改”，readFile）


函数readFile（）{
if（this.files&&this.files[0]）{
var elem=document.createElement（“img”）；
元素设置属性（“高度”、“150”）；
元素设置属性（“宽度”、“150”）；
元素setAttribute（“alt”、“Flower”）；
var FR=new FileReader（）；
FR.addEventListener（“加载”，功能（e）{
document.getElementById（“placehere”）.appendChild（elem）；
elem.src=e.target.result；
});
FR.readAsDataURL（this.files[0]）；
}
}
document.getElementById（“inp”）.addEventListener（“更改”，readFile）
替换图像的原因是，每次调用readFile
时，您都在重用在初始加载脚本时创建的相同img元素（var elem=document.createElement（“img”）
）
解决方案是将document.createElement调用移动到readFile函数中，从而在每次调用时创建一个新的image元素。修订后的代码见下文。希望这有帮助
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);

替换映像的原因是，每次调用readFile
时，您都在重用在初始加载脚本时创建的相同img元素（var elem=document.createElement（“img”）
）
解决方案是将document.createElement调用移动到readFile函数中，从而在每次调用时创建一个新的image元素。修订后的代码见下文。希望这有帮助
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);

可能将所有代码放入readFile函数每次要附加新图像时，您都需要重新创建元素您的文件数组在哪里？可能将所有代码放入readFile函数每次要附加新图像时，您都需要重新创建元素您的文件数组在哪里？单击“整理”按钮：）并添加一些解释单击“整理”按钮：）并添加一些解释