文件的读取
這幾天在研究文件讀取問題，寫了個小demo，如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><input type="file" multiple name="" id=""><button>點擊讀取文件</button><script type="text/javascript">var btn = document.querySelector('button');var file = document.querySelector('input[type="file"]');var fr = [];btn.onclick = function(){ // 讀取文件for(var i = 0; i < file.files.length; i ){fr[i] = new FileReader();fr[i].readAsDataURL(file.files[i]);}// fr.readAsDataURL(data);// 讀取文件是一個耗時的操作，所以需要用事件監(jiān)聽讀取完畢，// load事件是文件讀取完畢之后觸發(fā)的事件for(var j = 0; j < fr.length; j ){fr[j].addEventListener('load', function(){//獲取讀取的結(jié)果 //result屬性里面存儲的就是讀取文件的結(jié)果 console.log(fr);var result = this.result; // 創(chuàng)建圖片對象var img = document.createElement('img');img.src = result;document.body.appendChild(img); })} }</script> </body> </html>?
更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com
總結(jié)
