HTML5中input框读取文本文件内容的例子

在HTML5中，大幅度地增加与改良了input属性的种类，可以简单的使用这些属性来实现之前需要使用JavaScript才能实现的。对于html5中新增的input属性支持得最多、最全面的是Opera浏览器。

1. type属性

html5中input的type属性增的可取值新增几种，对于不支持这几种新增值的浏览器会统一解析为text类型

1，选择文件后，我们可以获取其中的文件对象属性

每个文件对象都有三个有用的属性：
   name：保存文件名（不包含路径）
   size：文件的字节大小
   type：保存文件的MIME类型
可以分别读取这三个属性，然后加入判断。比如拒绝处理超过一定大小的文件，或者只允许某种类型的文件。

2，创建FileReader对象，处理文件

通过调用 FileReader 的方法可以提取文件内容。其提供的方法有：
   readAsText()：把文件内容转换成一个长字符串，这个方法只能处理包含文本内容（而不是二进制内容）的文件。（像txt、html、xml、csv等格式文件都可以）
   readAsBinaryString()：让应用处理二进制编码的数据，但基本上就是把数据保存到一个文本字符串中，效率不高。
   readAsArrayBuffer()：将数据读到一个数组中，每个数组项代表一个字节。其优势是可以用来创建Blob对象，然后切分成更小的二进制数据块，以便逐块处理。
   readAsDataURL()：能让我们方便地取得图片数据。

3，读取文件数据以及相关属性样例