`
zhangyaochun
  • 浏览: 2614774 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

html5之FileReader接口

阅读更多

此篇主要是介绍一下HTML5的FileReader接口

 

1、FileReader接口的作用

 

    用来把文件读入内存,并且读取文件中的数据。

 

2、支持情况

 

    FF3.6+| Chrome6+

 

 

/*检测方式*/
if(typeof FileReader == 'undefined'){
     //不支持
}else{
    //支持
}
 

3、FileReader接口的方法

 

 

  • readAsBinaryString(file)               ------ 将文件读取二进制码
          通常我们将它传送到后端,后端可以通过这段字符串存储文件
  • readAsText(file,[encoding])          ------ 将文件读取文本
          第二个参数是文本的编码方式,默认UTF-8
  • readAsDataURL(file)                     ------ 将文件读取为DataURL
          将文件读取为一串Data URL字符串,将小文件以一种特殊格式的URL地址直接读入页面。
          小文件指图像与html等格式的文件
  • abort()                                         ------- 中断读取操作

 

 

4、FileReader接口的事件

 

 

  • onabort             ---------数据读取中断时触发
  • onerror              ---------数据读取出错时触发
  • onloadstart        --------数据读取开始时触发
  • onprocess          --------数据读取中
  • onload               --------数据读取成功完成时触发
  • onloadend         --------数据读取完成时触发,无论成功失败
分享到:
评论

相关推荐

    HTML5 FileReader接口学习笔记

    总结起来,HTML5的FileReader接口为Web应用程序提供了强大的本地文件读取功能,支持异步处理,使得开发者能以各种方式处理用户上传的文件,极大地丰富了Web应用的功能。通过了解和熟练运用FileReader接口,开发者...

    Html5FileReader文档.docx

    FileReader 接口是 HTML5 中的一个异步 API,用于读取文件中的数据。该接口提供了四个方法,分别是 readAsBinaryString、readAsText、readAsDataURL 和 abort。其中,readAsBinaryString 方法将文件读取为二进制编码...

    HTML5中FileReader接口使用方法实例详解

    FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6.0+实现了FileReader接口。 1、FileReader接口的方法 FileReader接口有4个...

    JavaScript通过filereader接口读取文件

    JavaScript通过FileReader接口读取文件的知识点主要涵盖了如何使用FileReader对象来读取本地文件系统中的文件,其中重点介绍了使用readAsDataURL方法来预览图片文件。这一过程涉及到前端开发中的文件操作与DOM操作,...

    JavaScript html5利用FileReader实现上传功能

    本文重点介绍如何利用JavaScript中的FileReader接口来实现HTML5网页上的文件上传功能。FileReader接口是HTML5提供的一个用于读取文件的API,它允许Web应用程序异步读取存储在用户计算机上的文件(如用户上传的文件)...

    H5 FileReader读取shp文件

    FileReader API是HTML5提供的一种接口,用于读取Blob或File对象中的数据。它提供了多种读取方法,如readAsText、readAsDataURL和readAsArrayBuffer等,用于读取不同类型的数据。在读取过程中,可以监听`onload`、`on...

    使用HTML5 转换彩色图片为黑白色.doc

    通过对 HTML5 的 canvas 元素和 FileReader 接口的应用,我们可以实现图片的灰度转换。 知识点一:HTML5 的 canvas 元素 canvas 元素是 HTML5 中的一个新增元素,用于在网页中绘制图形。 canvas 元素可以用来绘制...

    浅谈HTML5 FileReader分布读取文件以及其方法简介

    HTML5提供了一个用于文件读取的API,即FileReader接口,它允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用FileReader可以实现文件的分布读取,这对于处理大文件时,可以有效减少...

    JS+HTML5 FileReader对象用法示例

    JavaScript(简称JS)是一种广泛使用的网页脚本语言,而HTML5是HTML标准的最新版本,引入了诸多新特性和API,其中包括FileReader对象。FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(例如用户...

    JS+HTML5 FileReader实现文件上传前本地预览功能

    HTML5之FileReader的使用 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 FileReader的使用方式非常简单,可以按照如下...

    Html5 FileReader实现即时上传图片功能实例代码

    本文将详细介绍如何使用HTML5的FileReader接口实现即时上传图片的功能,特别针对IE9以上的浏览器。由于项目需求,本文未涉及对IE8的支持。 HTML5的FileReader接口是现代Web开发中的一个重要工具,它允许网页直接...

    HTML5 form标签之解放表单验证使用方法.docx

    在文件上传方面,HTML5 中新增了 FileReader 接口,用于将文件读取到内存中。FileReader 接口提供了四种方法:readAsBinaryString、readAsText、readAsDataURL 和 abort,分别用于将文件读取为二进制码、文本、...

    基于FileReader多图片上传插件.zip

    此插件利用HTML5的FileReader接口,能够实时预览用户所选的图片,并且允许用户通过不同的选择器进行自定义样式,以适应各种网页设计需求。在实际应用中,它不仅支持单张图片的上传控制,还能够处理多张图片的批量...

    HTML5图片dataURL转换工具.zip

    2. **FileReader API**: HTML5的FileReader接口是实现本地文件读取的关键。通过这个API,开发者可以在浏览器环境中读取用户选择的文件,如图片,然后将其转化为数据URI。主要的方法有readAsDataURL(),它可以将指定...

    html5手机端上传图片

    FileReader接口用于读取文件内容,Blob对象则用于存储文件数据。 2. **** 在HTML中,`<input type="file">`元素用于创建一个文件选择器,用户可以通过这个选择器选取本地文件。添加`accept`属性可以限制用户只能...

    从入门到精通HTML5——PDF——网盘链接

     15.2.1 检测浏览器是否支持FileReader接口 285  15.2.2 FileReader接口的方法 285  15.2.3 使用readAsDataURL方法预览图片 286  15.2.4 使用readAsText方法读取文本文件 287  15.2.5 FileReader接口中的...

Global site tag (gtag.js) - Google Analytics