html簡單的多檔案預覽
html5中的檔案操作
fileReader:讀取檔案
readAsText():讀取文字返回字串值
readAsBinaryString():讀取任意型別檔案，返回二進位制字串，一般用於儲存資料
readAsDataURL():讀取一段以data-開頭的字串
abort():中斷讀取檔案
檔案讀取事件有
onerror:讀取錯誤時
onload:讀取成功並完成後
onloadend:讀取完成後（即使沒有成功）
onstart:讀取開始時
onProgress:讀取過程中
以下為一個簡單的多檔案讀取預覽的程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } img { width: 100px; height: 100px; } div { float: left; width: 200px; height: 30px; } </style> </head> <body> <input type="file" multiple="multiple" /><br /> <!--<img src="" width="300px" height="300px" id="fileUp" /><br />--> <span id="upload"> </span> <input type="button" value="提交" /> </body> <script> var res1 = /^data:image/; //正則，驗證是否為圖片 var res2 = /^data:text/; //正則，驗證是否為文字 document.querySelector("input[type=file]").onchange = function() { // debugger; document.getElementById("upload").innerHTML = ""; file = document.querySelector("input[type=file]"); for(i = 0; i < file.files.length; i++) { // console.log(file.files[i].type); if(file.files[i].type == "text/plain") { var reader1 = new FileReader(); reader1.readAsText(file.files[i]); reader1.onload = function(e) { var result1 = e.target.result; document.getElementById("upload").innerHTML = result1; } } else { var reader = new FileReader(); reader.readAsDataURL(file.files[i]); reader.onload = function(e) { var result = e.target.result; if(res1.test(result)) { var imgbox = document.createElement("img"); //建立img元素 imgbox.src = result; //為此元素新增連結 document.getElementById("upload").appendChild(imgbox); //將元素追加到盒子中 } } } } } </script> </html>
注意：var reader = new FileReader();時即新建檔案閱讀物件時需要放在迴圈體中，否則會報錯
The object is already busy reading Blobs.
使用file = document.querySelector("input[type=file]");來獲取input中的選取的檔案
為此input在行內新增multiple="multiple"可以讓檔案多選
使用document.createElement("元素");建立元素，並使用父元素.appendChild()方法追加
正則寫法 var 表示式名=/正則表示式/; 在最前方加^符號表示以此正則開頭，
在最後方加$符號表示以此正則結尾