FileReader的解释

异步的读取存储在用户计算机上的文件

创建一个FileReader 对象

    var reader = new FileReader();

FileReader的方法和事件

参数/事件 描述

方法

abort 中断读取

readAsText(file, [encoding]) 将文件读取为文本

该方法有两个参数,其中第二个参数是文本的编码方式,默认值为 UTF-8。这个方法非常容易理解,将文件以文本方式读取,读取的结果即是这个文本文件中的内容。

readAsBinaryString(file) 将文件读取二进制码

通常我们将它传送到后端,后端可以通过这段字符串存储文件

readAsDataURL(file) 将文件读取为DataURL

将文件读取为一串Data URL字符串,将小文件以一种特殊格式的URL地址直接读入页面。小文件指图像与html等格式的文件。

事件

onabort 数据读取中断时触发

onerror 数据读取出错时触发

onloadstart 数据读取开始时触发

onload 数据读取成功完成时触发

onloadend 数据读取完成时触发,无论成功失败

参考网址

FileReader:读取本地图片文件并显示

FileReader-MDN

HTML5应用之文件拖拽上传

FileReader 的了解的更多相关文章

  1. 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  2. js图片前端预览之 filereader 和 window.URL.createObjectURL

    //preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...

  3. [HTML5] FileReader对象

    写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...

  4. HTML5 之 FileReader(图片上传)

    1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...

  5. 毕业论文中使用的技术—FileReader接口

    用来把文件读入内存,并且读取文件中的数据. FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据 FileReader接口的方法 方法名 参 ...

  6. FileReader获取文件的base64编码

    <input type="file" id="picFile" /> function readFile() { var obj = documen ...

  7. Web API接口之FileReader

    Web API接口之FileReader *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  8. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  9. FileReader:读取本地图片文件并显示

    最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...

  10. FileInputStream、FileReader、FileInputStream、FileWriter使用小结

    本文是基于Linux环境运行,读者阅读前需要具备一定Linux知识 InputStream包含如下三个方法: int read():从输入流中读取单个字节,返回所读取的字节数据(字节数据可直接转化为i ...

随机推荐

  1. POJ 2955 Brackets 区间合并

    输出一个串里面能匹配的括号数 状态转移方程: if(s[i]=='('&&s[j]==')'||s[i]=='['&&s[j]==']')             dp ...

  2. uva 11168

    题意:给出平面上的n个点,求一条直线,使得所有点在该直线的同一侧且所有点到该直线的距离和最小,输出该距离和. 思路:要使所有点在该直线的同一侧,明显是直接利用凸包的边更优.所以枚举凸包的没条边,然后求 ...

  3. POJ 3419 Difference Is Beautiful(RMQ变形)

    题意:N个数,M个询问,每个询问为一个区间,求区间最长连续子序列,要求每个数都不同(perfect sequence,简称PS). 题解:很容易求出以每个数为结尾的ps,也就是求区间的最大值.有一个不 ...

  4. C++中实现从std::string类型到bool型的转换

    利用输入字符串流:std::istringstream bool b; std::string s = "true"; std::istringstream(s) >> ...

  5. for循环中使用了return

    for循环中使用了return,导致没有循环完毕就结束了整个方法的执行.

  6. (原创)vagrant up 异常报错,出现 There was an error while executing `VBoxManage` 的解决方法

    最近在使用 vagrant homestead 时,不小心在虚拟机上使用了 exit 命令退出虚拟机,导致再使用 vagrant up 时出现以下错误: Bringing machine 'larav ...

  7. Ajax调用WebService(一)

    Ajax调用WebService(一) http://www.cnblogs.com/leslies2/archive/2011/01/26/1934889.html 分类: Ajax 使用技术 We ...

  8. Ecshop图片不清晰怎么办?

    很多人说缩略图的质量不高,模糊,那是因为gd库生成缩略图时,默认生成jpg缩略图或商品图的质量是75.可以通过修改生成缩略图质量的默认值来提高缩略图的质量. 找到includes/cls_image. ...

  9. Spring + iBatis 的多库横向切分简易解决思路

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  10. 较具体的介绍JNI

    JNI事实上是Java Native Interface的简称,也就是java本地接口.它提供了若干的API实现了和Java和其它语言的通信(主要是C&C++).或许不少人认为Java已经足够 ...