转载

Drag and Drop Files

The FileReader Interface

HTML5FileReader 接口提供了一系列 methods ,可以用来读取 File 或者是 Blob 对象.

所有的methods 都是 asynchronous,意味着读取文件的时候,整个程序不会卡住。

首先生成一个 instance of FileReader

var reader = new FileReader();

method介绍:

readAsText()

用来读取 text 文件。两个parameters:

  • First: 用来读取 File or Blob 对象

  • Second(optional): 用来encoding file. 默认是 UTF-8

因为所有方法都是 asynchronous , 所以需要设置 event listner 去监听文件是否读取完。用 onload 来异步完成内容的读取,文件的内容将储存在 FileReader 实例的 result property里面

var reader = new FileReader();  reader.onload = function(e) {     var text = reader.result; }  reader.readAsText(file, encoding);

readAsDataURL()

用来生成图片的 base64 encoded string

var reader = new FileReader();  reader.onload = function(e) {     var dataUrl = reader.result; } reader.readAsDataURL(file);

readAsBinaryString()

生成二进制代码,方便传输,与 XMLHttpRequest.sendAsBinary() 配合使用

var reader = new FileReader();  reader.onload = function(e) {   var rawData = reader.result; }  reader.readAsBinaryString(file);

readAsArrayBuffer()

生成 ArrayBuffer , ArrayBuffer 就是 fixed-length binary data buffer . 当需要操纵文件比如转换JPEG 图像到 PNG的时候很有用

var reader = new FileReader();  reader.onload = function(e) {   var arrayBuffer = reader.result; }  reader.readAsArrayBuffer(file);

abort()

终止文件读取, 常常用在读取大文件的时候

reader.abort();

Examples

Reference

正文到此结束
Loading...