在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，这样就可以在文件上传之前和服务器的文件列表比对，以防止重复上传浪费带宽。功能的实现就是这样，具体的用途那就是项目设计师的工作了。