[問題] 關於選取多個檔案並顯示

看板Ajax作者sm10547 (sm10547)時間8年前 (2016/05/22 19:51)推噓1(1推 0噓 1→)

留言2則, 2人參與討論串1/1

我是個學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/>  <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://www.ptt.cc/bbs/Ajax/M.1463917874.A.EDA.html ※ 編輯: sm10547 (220.132.16.87), 05/22/2016 20:43:36