作者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/m.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