`
zhangyaochun
  • 浏览: 2565911 次
  • 性别: 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接口学习笔记

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

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

    JavaScript通过filereader接口读取文件

    使用FileReader接口的readAsDataURL方法实现图片的预览。 源代码: <html> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>通过filereader接口读取...

    HTML5 FileReader对象的具体使用方法

    前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍。 FileReader FileReader主要用于将文件内容读入内存...

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

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

    从入门到精通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接口中的...

    Html读取本地文件夹下图片并显示的示例代码

    调用Web API接口FileReader中readAsDataURL方法读取数据(这个函数参数file标签获取到的文件路径),然后把数据加载到FileReader中(base64格式),之后就可以用Img来指定源时base64格式的数据,可以绘制图片。...

    JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个...由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取文件中的数据。 var reader=new FileReader(); 该接口总共有四个方法和

    HTML5 File接口在web页面上使用文件下载

    File接口提供了与文件相关的信息,并且运行JavaScript在web页面上去访问文件中的内容。 File对象来自于用户使用input标签选择文件返回的FileList对象,来自于拖放操作的DataTransfer对象。File对象是一种特殊的Blob...

    基于javascript html5实现多文件上传

    本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: 请选择一个图像文件: ... 重点就是如何处理这个change事件了,使用H5新的FileReader接口读取文件并打成base64编码

    Ajax上传图片及上传前先预览功能实例代码

    这里主要采用了HTML5中的FileReader对象来实现,关于FileReader对象,如果小伙伴们不了解,可以查看这篇文章HTML5学习之FileReader接口。我们来看看实现方式: <!DOCTYPE html> <html lang="en"> <head...

    JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

    最近在做一个H5的项目,里边涉及到拍照上传图片的功能以及识别...HTML5定义了 FileReader 作为文件 API 的重要成员用于读取文件,根据 W3C 的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型。 F

    javascript html5移动端轻松实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。 用的技术主要是: ...

    PHP实现本地图片转base64格式并上传

    主要是用到html5 FileReader的接口,既然是html5的,所支持的浏览器我就不多说啦 可以大概的讲一下思路,其实也挺简单。选择了图片之后,js会先把已选的图片转化为base64格式,然后通过ajax上传到服务器端,服务器端...

    移动端HTML5实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现。 用的技术主要是: ...

    jQuery实现文件编码成base64并通过AJAX上传的方法

    本文实例讲述了jQuery实现文件编码成base64并通过AJAX上传的方法。...灵光一闪,利用javascript的FileReader对象将文件编码成base64再传服务器不就行了么~ 开始动手,丰衣足食。 前端对文件进行base64编码并通过aj

    通过javascript把图片转化为字符画

    html5里面的FileReader interface可以把图片对象的数据读到内存,然后通过接口的进度事件(Progress Events)访问这些数据。浏览器支持:1、Internet Explorer: 10+2、Firefox: 10+3、Chrome: 13+4、Opera: 12+5、...

    Java2实用教程.rar

    10 4FileReader类和FileWriter类 10 5使用文件对话框打开和保存文件 10 6RandornAccessFile类 10 7数据流 10 8数组流 10 9对象流 10 10序列化与对象克隆 10 11文件锁FileLock 10 12Process类中的流 10 13带进度条的...

    使用jquery Ajax实现上传附件功能

    用过jquery的Ajax的人...Ajax本身的序列化机制的硬伤归其原因在于在html4的时代,没有FileReader接口,在页面里无法读取File(Blob)文件,用document.getElementById(“文件控件的id”).value只能拿到文件的name,因

Global site tag (gtag.js) - Google Analytics