用js在ul标签中已成功添加子节点img，但是运行后在网页上显示添加多个图片就重复，求解？代码如下：
<script type="text/javascript">
function showPreview(source) {
var file = source.files[0];
var oUll=document.getElementById("ull");
var oBtn=document.getElementById("btn");
var aLi=document.createElement("li");
var aImg=document.createElement("img");
if(window.FileReader) {
var fr = new FileReader();
oBtn.onclick=function(){
oUll.appendChild(aLi);
aLi.appendChild(aImg);
fr.onloadend = function(e) {
for(var i=0;i<4;i++){
document.getElementsByTagName("img")[i].src = e.target.result;
}
}
fr.readAsDataURL(file);
}
}
}
</script>
</head>
<body>
<input type="file" name="file" onchange="showPreview(this)" />
<input id="btn" type="button" value="添加" />
<ul id="ull"></ul>
结果如下：
添加一张图片时：
添加两张图片或多张图片就重复了
求大神解答
<html>
<head>
<meta charset="UTF-8">
<title>Droid</title>
<style type="text/css">
ul li {
float: left;
list-style: none;
padding-right: 10px;
}
</style>
<script type="text/javascript">
function showPreview (source)
{
var file = source.files[0];
var oUll = document.getElementById ("ul");
var oBtn = document.getElementById ("btn");
var aLi = document.createElement ("li");
var aImg = document.createElement ("img");
if (window.FileReader)
{
var fr = new FileReader ();
oBtn.onclick = function ()
{
oUll.appendChild (aLi);
aLi.appendChild (aImg);
var imgs = document.getElementsByTagName ("img");
fr.onloadend = function (e)
{
imgs[imgs.length - 1].src = e.target.result;
}
fr.readAsDataURL (file);
}
}
}
</script>
</head>
<body>
<input type="file" name="file" onchange="showPreview(this)" />
<input id="btn" type="button" value="添加" />
<ul id="ul"></ul>
</body>
</html>追问
在麻烦下如何让添加的图片滚动起来
追答给图片起名字时注意一下就可以了。
