FileReader 的了解
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 的了解的更多相关文章
- 三种上传文件不刷新页面的方法讨论:iframe/FormData/FileReader
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...
- js图片前端预览之 filereader 和 window.URL.createObjectURL
//preview img : filereader方式 document.getElementById('imgFile').onchange = var ele = document.getEle ...
- [HTML5] FileReader对象
写在前面 前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍. FileRea ...
- HTML5 之 FileReader(图片上传)
1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. Fil ...
- 毕业论文中使用的技术—FileReader接口
用来把文件读入内存,并且读取文件中的数据. FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据 FileReader接口的方法 方法名 参 ...
- FileReader获取文件的base64编码
<input type="file" id="picFile" /> function readFile() { var obj = documen ...
- Web API接口之FileReader
Web API接口之FileReader *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- FileReader:读取本地图片文件并显示
最近忙得比狗还惨,导致长时间没能更新文章,真心对不住啊.抽空整理了下关于在页面上读取和显示本地图片的实例文章,本文通过实例讲解如何使用支持FileReader浏览器的用户将能够通过一个file inp ...
- FileInputStream、FileReader、FileInputStream、FileWriter使用小结
本文是基于Linux环境运行,读者阅读前需要具备一定Linux知识 InputStream包含如下三个方法: int read():从输入流中读取单个字节,返回所读取的字节数据(字节数据可直接转化为i ...
随机推荐
- codeforce 604B More Cowbell
题意:n个球,分成k堆.问堆的最大值的最小. #include <bits/stdc++.h> typedef long long ll; using namespace std; int ...
- android NDK 实用学习(二)-java端对象成员赋值和获取对象成员值
1,关于java端类及接口定义请参考: android NDK 实用学习-获取java端类及其类变量 2,对传过来的参数进行赋值: 对bool类型成员进行赋值 env->SetBooleanF ...
- [置顶] Flex中Tree组件无刷新删除节点
在Tree组件中经常要删除某个节点,而删除之后重新刷新加载该Tree组件会影响整个操作效果和效率,因此,无刷新删除就比较好,既删除了节点也没有刷新tree,而使Tree的状态处于删除之前的状态. 无刷 ...
- home_work--用户登陆
前提: 根据文本中的已有用户和密码,实现登陆的交互:在用户输入用户名后,会有一个检测用户是否被锁定的环节:如果用户三次密码输入错误,则该用户则会被添加到锁定文件中,无法登陆. 涉及到的知识点: 1.p ...
- Python中raw字符串与多行字符串
如果一个字符串包含很多需要转义的字符,对每一个字符都进行转义会很麻烦.为了避免这种情况,我们可以在字符串前面加个前缀r ,表示这是一个 raw 字符串,里面的字符就不需要转义了.例如: r'\(~_~ ...
- Oracle- 备份单表结构和单表数据
在网上看到,有用,记录如下: 这是Oracle的备份表结构和数据,因为实际工作对表进行大规模的数据改动都要讲数据进行备份,否则丢了数据那是很头疼的事情. --创建一份表结构 create table ...
- .Net Core静态文件中间件StaticFiles的使用
以前,当我们的网站需要显示图片的时候,直接在网站目录下新建文件夹,把图片放在这个文件夹下,然后通过文件夹的路径就可以访问到. 但是在.net core中不可以这样,要通过中间件StaticFiles配 ...
- 【转】如何从零开始学会 Ruby on Rails?
文章转自:http://huacnlee.com/blog/how-to-start-learning-ruby-on-rails/ 这个话题曾经给身边的很多朋友说过同样的话题,这里整理以下. 如果你 ...
- .@RequestMapping 使用方法
1.@RequestMapping 使用方法 SpringMVC中,@RequestMapping用来处理请求,比方XXX.do @RequestMapping("/aaa") ...
- C#WinForm应用程序实现自动填充网页上的用户名和密码并点击登录按钮【转载】
使用WebBrowser控件,在documentComplete事件处理器里写 HtmlElement name = webBrowser1.Document.GetElementById(" ...