JavaScript读文件（HTML5）

在HTML5中，我们可以使用FileReader对象来读取INPUT-INPUT控件中选中的文件的内容。下面是例子：

<input type="file" id="f" />
 <script>
 window.οnlοad=function(){
   //获取INPUT-FILE控件对象
   var f=document.getElementById("f");
   //添加change事件，会在选择文件时候触发
   f.οnchange=function(){
     //创建一个FR对象来读文件
     var fr=new FileReader;
     //给FR对象添加一个load事件，会在读到文件时候触发
     fr.οnlοad=function(){
       //这个result属性中保存的就是文件的内容啦
       console.log(fr.result);
     };
     //读取二进制数据到一个字符串中，或者称为字节数组
     fr.readAsBinaryString(f.files[0]);
   };
 };
 </script>

　　注意HTML5中的INPUT-FILE控件中使用的是储存文件列表的files属性，因为在HTML5中INPUT-FILE控件有个multiple属性，这是上这个属性就可以同时选择多个文件了，所以需要用拟数组来保存选中的文件列表。这个例子中没有设置multiple，这就意味着只能选择一个文件。那么我们在文件选中以后从files属性的0这个索引中取出这个文件对象。
　　关于文件对象，在早期的HTML5中支持getAs*的方法，可以直接读取文件的内容，但是现在的HTML5中废弃了这些方法。需要使用专门的FileReader对象来读取文件内容。FileReader可以以不同的方式读入文件，比如上面的例子是把文件的二进制作为字符串读入，也就是ANSI编码读入。
　　除了笨拙的INPUT-FILE控件外，还有另外一种灵活的文件选择方式。那就是传说中的拖拽，使用拖拽事件可以直接获取到拖拽到网页上的文件。下面是拖拽的例子：

<script>
 //这个是火狐的BUG，不阻止dragover的行为就无法组织drop的行为
 document.οndragοver=function(e){e.preventDefault()};
 //直接在整个文档上定义拖拽事件
 document.οndrοp=function(e){
   //创建FR对象，这个在上面的例子中介绍过了
   var fr=new FileReader;
   fr.οnlοad=function(){
     console.log(fr.result);
   };
   //使用FR对象以utf-8的编码读取一个文本文件
   fr.readAsText(e.dataTransfer.files[0],"utf-8");
   //阻止默认行为
   //文件拖拽会被有些浏览器解析为“打开”
   e.preventDefault();
 };
 </script>

　　读文件就是这么简单啦，学会了读文件我们就可以利用它做很多事情。比如在客户端计算文件的MD5，这样就可以在文件上传之前和服务器的文件列表比对，以防止重复上传浪费带宽。功能的实现就是这样，具体的用途那就是项目设计师的工作了。

转载请注明：前端录»JavaScript读文件（HTML5）

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=20-75-2"></script>