Html5 本地文件读取 API 研究使用过程中的意外发现 - MDN

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS、Android、Html5、Arduino、pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作。

补充:

终于可以读出肉的眼能看懂的人类文字了!!!

经在 safari 7.0.4(9537.76.4) 测试,即使关闭 WebGL 支持,File API 仍可正常读取本地文本文件内容。

下面 FileReader 的文档估计时间会稍微久远一些,不过按其描述,确实准确解读了火星语,我们地球人终于全都知道了。

接下来,语言通了,知道说的是啥了,开始贸易吧,还得继续遵循贸易规则,更得尊重当地的风俗习惯,来特俺们够!

说是原创,实际是资料搜集过程中的一个记录,从这个角度也算是原创吧!

至于内容,那可是 MDN 的原创,俺这里只能算借花献佛,非俺原创,本想翻译,后发现俺中意的内容有中文版,这也说明 MDN 对中国开发者的重视,不过也可能是我们中国开发者做的贡献,这个确实不清楚。

来个干脆的,把关注的整个页面全捞过来,也算做一个资源目录吧,详细的部分,真的太多了。

不过我想研究的是 FileReader 的文件加载过程及响应事件,异步处理嘛,肯定要有个开始与结束,面向对象的 JS ,俺确实不太熟,但用面向对象的思想来圈一圈它,还是跑不出范围的,所以,知道加速度的变化,对速度的把控,那确实是淋漓尽致!

至于俺要研究的部分,那可是本篇的核心内容,从此处算是比较权威的来源证实,Opera、Safari 还不支持这些个 API,不知这是否会成为本次研究的一个终结,还是别乱猜了,稍侯请示一下,会有结果,这个不必费心,有些时侯有些事情,确实不是我们能做得了主的,那么尽量全面的了解情况,分析整理后,提供多套可行方案和处理思路,呈报上去,自会有需要我们做的下一步工作,而至于如何选,怎么选,这个我们提供分析结果就可以了,至于最终结论,只要遵照行事即可,毕竟我们站的高度还看不到那些我们看不到的事情:

FileReader

在本文章中

  1. 方法概述
  2. 状态常量
  3. 属性
  4. 方法
    1. abort()
    2. readAsArrayBuffer()
    3. readAsBinaryString()
    4. readAsDataURL()
    5. readAsText()
  5. 事件处理程序
  6. 浏览器兼容性
    1. 针对Gecko的注意事项
  7. 相关链接

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自由拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后的返回结果.

想要创建一个FileReader对象,很简单,如下:

var reader = new FileReader();

如何在web应用程序中使用文件一文中有更详细的解释和例子.

方法概述

void abort();
void readAsArrayBuffer(in Blob blob);
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob blob);
void readAsText(in Blob blob, [optional] in DOMString encoding);

状态常量

常量名 描述
EMPTY 0 还没有加载任何数据.
LOADING 1 数据正在被加载.
DONE 2 已完成全部的读取请求.

属性

属性名 类型 描述
error DOMError 在读取文件时发生的错误. 只读.
readyState unsigned short 表明FileReader对象的当前状态. 值为State constants中的一个. 只读
result   读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的. 只读.

方法

abort()

中止该读取操作.在返回时,readyState属性的值为DONE.

void abort();
参数

无.

抛出的异常
DOM_FILE_ABORT_ERR
当该FileReader对象没有在进行读取操作时(也就是readyState属性的值不为LOADING时),调用abort()方法会抛出该异常.

Note: 实现于Gecko 6.0.

Requires Gecko 7.0 (Firefox 7.0 / Thunderbird 7.0 / SeaMonkey 2.4)

readAsArrayBuffer()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容.

void readAsArrayBuffer(
  in Blob blob
);
参数
blob
将要读取到一个ArrayBuffer中的Blob对象或者File对象.

readAsBinaryString()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含所读取文件的原始二进制数据.

void readAsBinaryString(
  in Blob blob
);
参数
blob
将要读取的Blob对象或者File对象.

readAsDataURL()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.

void readAsDataURL(
  in Blob blob
);
参数
file
将要读取的Blob对象或者File对象.
例子

这个方法很有用,比如,可以实现图片的本地预览(在线演示):

<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

注: IE10以下的版本不支持FileReader()构造函数.不过可以利用滤镜来兼容旧版本的IE:兼容IE的图片本地预览.

readAsText()

开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个字符串以表示所读取的文件内容.

void readAsText(
  in Blob blob,
  in DOMString encoding 可选
);
参数
blob
将要读取的Blob对象或者File对象.
encoding 可选
一个字符串,表示了返回数据所使用的编码.如果不指定,默认为UTF-8.

事件处理程序

onabort
当读取操作被终止时调用.
onerror
当读取操作发生错误时调用.
onload
当读取操作成功完成时调用.
onloadend
当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
onloadstart
当读取操作将要开始之前调用.
onprogress
在读取数据过程中周期性调用.

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer* Opera* Safari
Basic support 3.6 (1.9.2) 7 10 Not supported Not supported

*IE9有一个File API Lab.Opera从11.10开始部分支持该API.

针对Gecko的注意事项

  • 在Gecko 2.0 beta 7 (Firefox 4.0 beta 7)之前,上述方法中所有的Blob参数都只能是一个File对象;根据最新的FileAPI草案,现在的所有的Blob参数既可以是Blob对象也可以是一个File对象.
  • 在Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10)之前,FileReader.error属性会返回一个FileError对象.根据最新的FileAPI草案,现在的FileReader.error会返回一个DOMError对象.

相关链接

附件

文件 大小 日期 附加者为
image_upload_preview.html

2235 字节 2012-05-08 17:16:34 fusionchess
crossbrowser_image_preview.html

2021 字节 2012-05-08 20:50:14 fusionchess
Podcasts example screenshot

19864 字节 2013-09-27 06:42:04 chrisdavidmills

文档标签和贡献者

对本页有贡献的人: ziyunfei

最后编辑者: ziyunfei, May 16, 2014 2:28:50 AM

我倒觉得,下面的 Web 开发人员文档 ,应该从下往上看才是由浅入深;

Web技术文档


开放的Web为开发者提供难以置信的机会。为了充分利用这些技术,你需要知道怎么使用它们。您在下面可以找到与我们相关的Web技术文档的链接。

Web 开发人员文档

Web 开发人员参考
所参考的 Web 开发文档包括HTML,CSS等。
Web 开发者指南
网络开发指南提供了有用的内容,以帮助你实际地来使用网络技术做那些你想去做或者需要你去做的事情。
Web 开发者入门
A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.
开发Web应用
Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.

View All...

Web技术参考

Web APIs
Reference material for each of the interfaces that comprise the Web‘s APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.
HTML
HyperText Markup Language is the language used to describe and define the content of a Web page.
CSS
Cascading Style Sheets are used to describe the appearance of Web content.
SVG
Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they‘re drawn.
MathML
The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.

Temporary

文档标签和贡献者

标签:

对本页有贡献的人: Sheppyshura-chinaziyunfeishengyouxiaowanywn_0liminjunteddywu

最后编辑者: liminjun, Apr 1, 2014 2:21:36 AM

Html5 本地文件读取 API 研究使用过程中的意外发现 - MDN

时间: 2024-11-03 21:01:00

Html5 本地文件读取 API 研究使用过程中的意外发现 - MDN的相关文章

HTML5 本地文件操作之FileSystemAPI整理(一)

一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type,size,successCB,errorCB);请求配额 2.queryUsageAndQuota();获取配额信息 window.requestFileSystem(window.PERSISTENT, gratedBytes, initFs, errorHandler); DOMFileSys

字符串,字典,数组写入本地文件和从本地文件读取

参考:http://blog.csdn.net/hakusan/article/details/39429393?utm_source=tuicool&utm_medium=referral 一.字符串,字典,数组存储到本地文件 字符串,数组,字典存储到本地文件过程一样,只是要存储的数据类型不同而已,这里以字符串存储到本地文件为例,如下:    NSString *content = @"将字符串存储到本地文件";    (1)获取Documents文件夹路径 参数:(1)指定

HTML5 本地文件操作之FileSystemAPI实例(二)

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

HTML5 本地文件操作之FileSystemAPI实例(三)

文件夹操作demo 1.读取根目录文件夹内容 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.PERSISTENT, 5 * 1024, initFs, errorHandler); function initFs(fs) { //显示根目录下的内容 var dirReader = fs.root.creat

HTML5 本地文件操作之FileSystemAPI实例(四)

目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(window.PERSISTENT, 5 * 1024, initFs, errorHandler); function initFs(fs) { //删除目录,子目录创建需要递归,获取可以直接指定'/' //如果子目录不存在,抛出删除异常

python中关于本地文件的API

Python中关于本地文件的API */--> Python中关于本地文件的API #TITLE: python中关于本地文件的API #KEYWORDS: Python,文件,路径 #DATE: Fri Jul 1 21:24:04 2016 在Python中,文件操作主要来自os模块,主要方法如下: 函数 描述 os.listdir(dirname) 列出dirname下的目录和文件 os.getcwd() 获得当前工作目录 os.curdir 返回当前目录('.') os.chdir(di

C# : 操作Word文件的API - (将C# source中的xml注释转换成word文档)

这篇博客将要讨论的是关于: 如何从C#的source以及注释, 生成一份Word格式的关于各个类,函数以及成员变量的说明文档. 他的大背景如下...... 最近的一个项目使用C#, 分N个模块, 在项目的里程碑的时候, 日本的总公司要检查我们的成果物. 成果物包括源代码, 概要设计式样书(SD,System Design), 详细设计式样书(PD, Program Design), 自动化测试等等. 源代码必须要符合编码规范(每个函数都要有注释, 方法变量的命名规则等...) 这些检查都很正常,

本地文件读取(csv,txt)时字符编码问题解决

今天进行csv文件读取时,老是入库为空,因为其中有中文字符,我要通过中文字符映射成相应的编号(上升:1011,下降:1012),于是怎么也取不到编号.刚开始以为程序映射出了问题,最后日志打出来后,发现读取的csv文件内容中文全为乱码.啊啊啊,好坑.于是看了下别人写的读取csv文件的代码,果然是没有设置字符编码.通过字符读取文件,转为字节流一定要进行字符编码设置,否则跑到测试环境或生产环境会使用本地默认字符集,那就坑大了. 问题代码: BufferedReader in = new Buffere

HTML5 本地文件操作之FileSystemAPI整理(二)

一.文件目录操作 1.DirectoryEntry对象 四.URL相关 URLType 文件路径类型 说明:在文件系统中的文件路径需转换成URL格式,已方便runtime快速加载. RelativeURL 相对路径URL 说明:只能在扩展API中使用,相对于基座提供的特定目录,以"_"开头. 常量: "_www": (DOMString 类型 )应用资源目录 保存应用的所有html.css.js等资源文件,与文件系统中根目录PRIVATE_WWW一致,后面加相对路径