filereader的使用技巧

<input type="file" multiple id="file">
<script type="text/javascript">
    var file = document.getElementById("file"); file.addEventListener("change",function () { var fileS = this.files[0];  if(window.FileReader) { var fr = new FileReader();  fr.onloadend = function(e) { var p_wrap = document.createElement("p"); document.body.appendChild(p_wrap); p_wrap.textContent = e.target.result; }; fr.readAsText(fileS,"utf-8"); } }); </script>

 首先filereader是HTMLAPI，咱們想操做，只須要經過如下幾步：

1.獲取當前上傳的文件，注意這裏傳上來的是一個數組

2.判斷當前瀏覽器是否是支持filereader功能       

3.new 一個新的filereader對象，而後能夠選擇進行讀取的方式，

 

 

4.文件加載成功後要作的事情，

 

 

若是想要上傳多個文件，直接循環輸出就能夠了

<input type="file" multiple id="file">
<script type="text/javascript">
    var file = document.getElementById("file"); file.addEventListener("change",function () { var fileS = this.files; for(var i = 0;i<fileS.length;i++){ //每次都for循環一個文件就能夠了 if(window.FileReader) { var fr = new FileReader(); fr.onloadend = function(e) { var p_wrap = document.createElement("p"); document.body.appendChild(p_wrap); p_wrap.textContent = e.target.result; }; fr.readAsText(fileS[i],"utf-8"); } } }); </script>

 

若是要判斷文件的大小或者文件的類型，直接判斷fileS[i].filetype或者filesize等等               

具體的能夠經過打印     console.log(fileS.constructor.prototype)來查看相應的方法。