作者sm10547 (sm10547)
看板Ajax
标题[问题] 关於选取多个档案并显示
时间Sun May 22 19:51:11 2016
我是个学js的新手
想自己练习做一个能选取多个image档案并将档案依序都show出来的功能
但现在碰到的情况是选取多个档案後且按了显示file的button
只能show出一个image档案
希望各位前辈能帮我看看出了甚麽问题
以下是我的全部程式码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> 档案上传区 </title>
</head>
<body>
<!--可选择多个档案-->
浏览档案：<input id="file1" type="file" multiple /><br/>
<!--show出多个档案-->
<input type="button" value="showfile" onclick="readURL();"/><br/>
<script type="text/javascript">
var reader = null;
if(FileReader) //若支援filereader
{
reader = new FileReader();
}
else
{
alert("Not support");
}
var readURL = function()
{
//取得filereader里的阵列资料
var imageEle = document.getElementById("file1");
//取得filereader里的阵列资料
var fileList = imageEle.files;
//for loop做选取档案数量的次数
for(var i = 0 ; i < fileList.length ; i ++)
{
//依序取出fileList的file
var file = fileList[i];
//取出file里的资料
reader.readAsDataURL(imageEle.files[i]);
//动态建立div元素
div = document.createElement("div");
//当onclick启动後等待档案载入
reader.onload = function()
{
//秀出档案
div.innerHTML = '<img src="'+this.result+'" alt=""/>'
};
//将div加入到dom节点
document.body.appendChild(div);
}
}
</script>
</body>
</html>
先谢谢各位前辈了!
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 220.132.16.87
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1463917874.A.EDA.html
※ 编辑: sm10547 (220.132.16.87), 05/22/2016 20:43:36
2F：→ sm10547: 谢谢上面的前辈 但是我的程式码有甚麽问题吗@@看不太出来 05/23 09:14