前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

JavaScript读文件(HTML5)

js
在HTML5中,我们可以使用FileReader对象来读取INPUT-INPUT控件中选中的文件的内容。下面是例子:<input type="file" id="f" />
<script>
window.onload=function(){
  //获取INPUT-FILE控件对象
  var f=document.getElementById("f");
  //添加change事件,会在选择文件时候触发
  f.onchange=function(){
    //创建一个FR对象来读文件
    var fr=new FileReader;
    //给FR对象添加一个load事件,会在读到文件时候触发
    fr.onload=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.ondragover=function(e){e.preventDefault()};
//直接在整个文档上定义拖拽事件
document.ondrop=function(e){
  //创建FR对象,这个在上面的例子中介绍过了
  var fr=new FileReader;
  fr.onload=function(){
    console.log(fr.result);
  };
  //使用FR对象以utf-8的编码读取一个文本文件
  fr.readAsText(e.dataTransfer.files[0],"utf-8");
  //阻止默认行为
  //文件拖拽会被有些浏览器解析为“打开”
  e.preventDefault();
};
</script>

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


转载请注明:前端录»JavaScript读文件(HTML5)