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

时间：2022-06-25 18:14:26 编辑：袖梨来源：一聚教程网

使用 type 属性为 file 的元素，就能得到一个标准的上传文件框。除了能在

元素中将文件发送给Web服务器外，这个也有自己处理文件的方式。

在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，读取文件数据以及相关属性样例

Read Text

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程