filereader api 类型

filereader类似XMLHttpRequest,只是它用来从文件系统读取文件,提供了不同的方法去读取文件数据:
1、readAsText
2、readAsDataURL
3、readAsBinaryString
4、readAsArrayBuffer

读取的过程是异步的,有一些事件可以监听,progress,error,load等

progress事件没50毫秒触发一次,也有lengthComputable,loaded,total属性,可以在result里查看到目前读取了多少数据。

举例:
var filesList = document.getElementById(“files-list”);
EventUtil.addHandler(filesList, “change”, function(event){
var info = “”,
output = document.getElementById(“output”),
progress = document.getElementById(“progress”),
files = EventUtil.getTarget(event).files,
type = “default”,
reader = new FileReader();
if (/image/.test(files[0].type)){
reader.readAsDataURL(files[0]);
type = “image”;
} else {
reader.readAsText(files[0]);
type = “text”;
}
reader.onerror = function(){
output.innerHTML = “Could not read file, error code is “ +
reader.error.code;
};
reader.onprogress = function(event){
if (event.lengthComputable){
progress.innerHTML = event.loaded + “/” + event.total;
}
};
reader.onload = function(){
var html = “”;
switch(type){
case “image”:
html = “<img src=\”” + reader.result + “\”>”;
break;
case “text”:
html = reader.result;
break;
}
output.innerHTML = html;
};
});

读取过程中也是可以用abort来中断。最后不管是load,error,abort,都会触发loadend事件,意味着操作结束

如果需要读取部分内容的话,可以使用Blob上的slice方法。slice方法返回一个 Blob的实例。Blob类型实际上是file类型的super type。

function blobSlice(blob, startByte, length){
if (blob.slice){
return blob.slice(startByte, length);
} else if (blob.webkitSlice){
return blob.webkitSlice(startByte, length);
} else if (blob.mozSlice){
return blob.mozSlice(startByte, length);
} else {
return null;
}
}

读取文件前32位数据:
var filesList = document.getElementById(“files-list”);
EventUtil.addHandler(filesList, “change”, function(event){
var info = “”,
output = document.getElementById(“output”),
progress = document.getElementById(“progress”),
files = EventUtil.getTarget(event).files,
reader = new FileReader(),
blob = blobSlice(? les[0], 0, 32);
if (blob){
reader.readAsText(blob);
reader.onerror = function(){
output.innerHTML = “Could not read file, error code is “ +
reader.error.code;
};
reader.onload = function(){
output.innerHTML = reader.result;
};
} else {
alert(“Your browser doesn’t support slice().”);
}
})

时间: 2024-07-30 13:46:03

filereader api 类型的相关文章

HTML5读取本地文件 FileReader API接口

1.FileReader接口的方法 FileReader接口有4个方法,其中3个用来读取文件,另一个用来中断读取.无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中. FileReader接口的方法 方法名 参数 描述 readAsBinaryString file 将文件读取为二进制编码 readAsText file,[encoding] 将文件读取为文本 readAsDataURL file 将文件读取为DataURL abort (none) 终端读取操作 2.

[转载] HTML5 文件操作API——HTML5系列

简介 我常常想,如果网络应用能够读取和写入文件与目录,将会非常方便.从离线转移到在线后,应用变得更加复杂,而文件系统方面的API的缺乏也一直阻碍着网络前进.存储二进制数据或与其进行交互不应局限于桌面.令人欣慰的是,由于FileSystemAPI的出现,这一现状终于得到了改变.有了FileSystemAPI,网络应用就可以创建.读取.导航用户本地文件系统中的沙盒部分以及向其中写入数据. API 被分为以下不同的主题: 读取和处理文件:File/Blob.FileList.FileReader 创建

File API简介

File API让我们可以创建文件,存储在本地文件系统的一个安全沙箱里,亦可以从其他来源读取文件,并对其进行操作 Web应用通过requestFileSystem方法来访问本地文件系统,该方法是全局的: requestFileSystem(type, size, successCallback, opt_errorCallback); 第一个参数表示存储的类型,有两个值可以选择,TEMPORARY或 PERSISTENT.使用TEMPORARY的话,存储的数据会由浏览器自行决定何时清除.PERS

HTML5 文件操作API

简介 我常常想,如果网络应用能够读取和写入文件与目录,将会非常方便.从离线转移到在线后,应用变得更加复杂,而文件系统方面的API的缺乏也一直阻碍着网络前进.存储二进制数据或与其进行交互不应局限于桌面.令人欣慰的是,由于FileSystemAPI的出现,这一现状终于得到了改变.有了FileSystemAPI,网络应用就可以创建.读取.导航用户本地文件系统中的沙盒部分以及向其中写入数据. API 被分为以下不同的主题: 读取和处理文件:File/Blob.FileList.FileReader 创建

HTML5 File API — 让前端操作文件变的可能

前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类似图片预览的功能.但是 File API 的出现,让这一切变成了可能. 跟着楼主由浅入深,了解下强大的 File API 吧. FileList FileList 对象针对表单的 file 控件.当用户通过 file 控件选取文件后,这个控件的 files 属性值就是 FileList 对象.

ebay的api的开发技术笔记,有点乱

使用eBay API基本步骤介绍 要开始使用eBay API,需要如下基本步骤: 1.    注册开发帐号: https://developer.ebay.com/join/Default.aspx 2.    选择API类型: eBay有大约6种API 开发语言,例如.net和Java的SDK http://developer.ebay.com/products/trading/ http://developer.ebay.com/products/overview/api-by-featur

API爬虫--Twitter实战

本篇将从实际例子出发,展示如何使用api爬取twitter的数据. 1. 创建APP 进入https://apps.twitter.com/,创建自己的app.只有有了app才可以访问twitter的api并抓取数据.只需创建最简单的app即可,各种信息随意填写,并不需要进一步的认证,我们要的只是app的Consumer Key (API Key), Consumer Secret (API Secret), Access Token 和 Access Token Secret.鉴于单app的爬

5.hadoop流原理、实例和新旧API下Wordcount详解

前四篇文章讲了Hadoop的配置和测试以及eclipse下的使用,有兴趣的可以先看下. 1.Hadoop流简介 用可执行文件作为Mapper和Reducer,接受的都是标准输入,输出的都是标准输出. 当一个可执行文件作为Mapper时,每一个Map任务会以一个独立的进程启动这个可执行文件,然后在Map任务运行时,会把输入切分成行提供给可 执行文件,并作为它的标准输入(stdin)内容.当可执行文件运行出结果时,Map从标准输出(stdout)中收集数据,并将其转化 为<key, value>对

Struts2(八)访问Servlet API

一.Struts2中的Servlet API 1.1.struts2的Action实现了MVC中C层的作用 针对请求用户显示不同的信息 登录后段保存用户信息 ----session 保存当前在线人数等功能---application 1.2.传统的Servlet API类型 HttpServletRequest HttpSession ServletContext 1.3.Struts2中将传统的Servlet API类型被处理成Map类型 访问更方便 不依赖传统Servlet API 类型--