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)来查看相应的方法。