置頂
關於選取多個檔案並顯示
我是個學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>
up vote
0
會員登入
(先登入會員才能回覆留言喔!)