[转]JavaScript文件操作(2)-FileReader

在上篇文章中,我介绍了在JavaScript操作文件，重点讲了如何取得File对象。 这些对象包含的文件的元数据在上传或者拖放到浏览器中时可以获取到。有了文件当然接下来就是读取文件了。

FileReader

FileReader 功能很简单: 从文件中读取数据和保存到JS变量中。此API特意设计成跟XMLHttpRequest 一样因为都是从外部读取数据。读取过程都是异步的不会造成浏览器阻塞。

FileReader 可以返回几种格式来文件数据的格式， 而且这些格式在读取文件时是必须的。通过以下几个方法可以宣告读取完毕：

  • readAsText() – 返回文件内容的纯文本格式
  • readAsBinaryString() –返回文件内容的二进制格式 (不推荐– 推荐使用 readAsArrayBuffer())
  • readAsArrayBuffer() – 返回文件内容的 ArrayBuffer 格式(图片文件推荐使用)
  • readAsDataURL() – 返回文件内容的 data URL格式

这些格式都应在文件读取操作前初始化好比 XHR 对象的 send()方法前要初始化一个 HTTP 请求一样。同样的，开始读取之前你还是要监听 load 事件。读取的结果从 event.target.result 获取。例如：


1

2

3

4

5

6

7

8

9

10

11

var reader = new FileReader();

reader.onload = function(event) {

    var contents = event.target.result;

    console.log("File contents: " + contents);

};

reader.onerror = function(event) {

    console.error("File could not be read! Code " + event.target.error.code);

};

reader.readAsText(file);

以上示例将文件以纯文本输出。文件读取成功则执行 onload 方法否则执行 onerror 方法。 FileReader 的实例可以直接从event.target中取到而且推荐这么取而不是直接用 reader 变量.。 result 属性包含有文件的内容， success 和 error 包含有成功与失败的信息。

读取 data URIs

读取 data URI 的步骤大致相同。Data URIs (有时称 data URLs) 有时是个不错的选择，比如，直接显示从硬盘上读到的图片 ，案例参考：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

var reader = new FileReader();

reader.onload = function(event) {

    var dataUri = event.target.result,

        img     = document.createElement("img");

    img.src = dataUri;

    document.body.appendChild(img);

};

reader.onerror = function(event) {

    console.error("File could not be read! Code " + event.target.error.code);

};

reader.readAsDataURL(file);

以上示例将读取的图片插入页面当中。由于data URI 包含有整个图片的内容，可以直接赋值给一个Image对象的src属性然后显示。你还能将图片直接画到 <canvas> 元素里:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

var reader = new FileReader();

reader.onload = function(event) {

    var dataUri = event.target.result,

        context = document.getElementById("mycanvas").getContext("2d"),

        img     = new Image();

    // wait until the image has been fully processed

    img.onload = function() {

        context.drawImage(img, 100, 100);

    };

    img.src = dataUri;

};

reader.onerror = function(event) {

    console.error("File could not be read! Code " + event.target.error.code);

};

reader.readAsDataURL(file);

以上示例将一个图片资源读入一个 Image 对象，然后将其画入一个canvas中（高宽各100）。

Data URIs 通常都这么用， 且可以用于任何类型的文件。最广泛的用法就是将文件一边读为data URI的同时一边在页面上即时显示。

读取 ArrayBuffers

ArrayBuffer 格式[1] 作为WebGL的一部分首次提出的。ArrayBuffer 表示将任意大小的字节数用一定的字节数来存储。此方式即是通过特定的视图来从 ArrayBuffer 读取数据，比如 Int8Array， 底层为 8 位有符号整型的集合，再如 Float32Array,  底层为32 位浮点数的集合。 这些谐称为类型化数组[2]，这样容易迫使你使用一定的字节数来存储而不是无限字节数（即传统的数组）。

你可能将一个 ArrayBuffer 主要用于处理二进制的文件， 以便更细粒度的操作数据。在这里讨论 ArrayBuffer 的方方面面完全超出了的本文的范围，只要知道将文件读成 ArrayBuffer格式是非常简单的即可。你可随时将 ArrayBuffer 通过 XHR 对象的 send() 方法到服务器端 (然后在后端将数据重建)，只要你的浏览器完整支持XMLHttpRequest Level 2[3] (各大浏览器的最新版都支持的包括IE10和Opera 12).

下期预告

通过FileReader 从文件中读取数据非常简单。如果你会用 XMLHttpRequest那么很容易学会从文件中读取数据。下期你将会学到更多 FileReader 相关事件和理解常见错误。

参考资料

  1. ArrayBuffer
  2. Typed Array Specification
  3. XMLHttpRequest Level 2

原文：

http://www.iunbug.com/archives/2012/06/04/220.html

可参考：

http://blog.csdn.net/zk437092645/article/details/8745647

时间： 2024-10-10 17:53:44

[转]JavaScript文件操作(2)-FileReader的相关文章

File API文件操作之FileReader

近来研究点对点的文件传输,想到一种方案FileReader+WebRtc. 当我看到FileReader的时候,哎呀,不错的东西啊,仔细一看属于File API,或者叫做Web API. File API 官方的文档  File API MDN的一些敞开 Web APIs|MDN 其主要由,FileList,Blob,File,FileReader等组成. 这里我们主要探讨一下FileReader,先看看官方网站的接口定义 [Constructor, Exposed=Window,Worker]

廖雪峰js教程笔记14 file文件操作

在HTML表单中,可以上传文件的唯一控件就是<input type="file">. 注意:当一个表单包含<input type="file">时,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才能正确编码并以multipart/form-data格式发送表单的数据. 出于安全考虑,浏览器只允许用户点击<input type="file">来选择本地

Html5 学习系列（四）文件操作API

原文:Html5 学习系列(四)文件操作API 引言 在之前我们操作本地文件都是使用flash.silverlight或者第三方的activeX插件等技术,由于使用了这些技术后就很难进行跨平台.或者跨浏览器.跨设备等情况下实现统一的表现,从另外一个角度来说就是让我们的web应用依赖了第三方的插件,而不是很独立,不够通用.在HTML5标准中,默认提供了操作文件的API让这一切直接标准化.有了操作文件的API,让我们的Web应用可以很轻松的通过JS来控制文件的读取.写入.文件夹.文件等一系列的操作,

java与python在处理大文件操作上的对比

1.问题描述 现在对一个2g的大文件,抽取第二列含有特点16个串的信息,并将这些含有特串的信息,写回到两个文件中 2.具体实现 (1)java代码 package naifen; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileReader; import java

Java文件操作大全

1 //1.创建文件夹 2 //import java.io.*; 3 File myFolderPath = new File(str1); 4 try { 5 if (!myFolderPath.exists()) { 6 myFolderPath.mkdir(); 7 } 8 } 9 catch (Exception e) { 10 System.out.println("新建目录操作出错"); 11 e.printStackTrace(); 12 } 13 14 //2.创建文

HTML5 本地文件操作之FileSystemAPI实例（二）

文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.TEMPORARY, 5 * 1024, initFs, errorHandler); function initFs(fs) { //删除文件 fileEntry.remove() fs.

java文件操作

11.3 I/O类使用 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程的一个基本能力.本章IO类的使用就从读写文件开始. 11.3.1 文件操作 文件(File)是 最常见的数据源之一,在程序中经常需要将数据存储到文件中,例如图片文件.声音文件等数据文件,也经常需要根据需要从指定的文件中进行数据的读取.当然, 在实际使用时,文件都包含一个的格式,这个格式需要程序员根据

java文件操作（IO流）

一.引言 由于在IO操作中,需要使用的数据源有很多,作为一个IO技术的初学者,从读写文件开始学习IO技术是一个比较好的选择.因为文件是一种常见的数据源,而且读写文件也是程序员进行IO编程的一个基本能力.本章IO类的使用就从读写文件开始. 文件操作 文件(File)是 最常见的数据源之一,在程序中经常需要将数据存储到文件中,例如图片文件.声音文件等数据文件,也经常需要根据需要从指定的文件中进行数据的读取.当然, 在实际使用时,文件都包含一个的格式,这个格式需要程序员根据需要进行设计,读取已有的文件

[JS进阶] HTML5 之文件操作(file)

前言 在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建. 该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件. 该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 当用户选择或编辑一个文件名,file-upload 元素触发 onc