[問題] 關於選擇並顯示多個檔案
想請教各位前輩
我想自己練習做一個能選取多個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), 來自: 59.120.214.33
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1464003148.A.192.html
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章
