文件 API

HTML5 提供了关于文件操作的文件 API。

代表原始二进制数据的 Blob 对象
存放原始二进制数据的缓存区的 ArrayBuffer 对象，以及可向缓存区写入或从缓存区中读出数据的 ArrayBufferView 对象与 DataView 对象。

演示：https://codepen.io/ryanlid/pen/zXELNW/

ArrayBuffer 与 ArrayBufferView 及 DataView

// TODO

Blob 对象

创建 Blob 对象

var blob = new Blob([blobParts, type]);

第一个参数值为一个数组，可以存放任意数量的以下类型的对象。

Array Buffer
ArrayBufferView
Blob
String 对象

第二个参数表示为数据类型

var blob = new Blob(['1234' + '5678']);
var blobX = new Blob(['1234' + '5678'], { type: 'text/plain' });
var blobY = new Blob(['1234' + '5678'], { type: 'text/plain;charset=UTF-8' });
var shorts = new Uint16Array(buffer, 512, 128);
var blobA = new Blob([blob, shorts]);
var bytes = new Unit8Array(buffter, shorts.byteOffset + shorts.byteLength);
var blobB = new Blob([blob, blobA, bytes]);
var blobC = new Blob([buffer, blob, blobA, bytes]);

通过 Blob 生成文件下载

通过浏览器的 URL 对象的 createObjectURL 方法可以根据一个 Blob 对象的二进制数据来创建一个 URL 地址并返回该地址。当用户访问该 URL 地址时可以直接下载原始的二进制数据。

演示：https://codepen.io/ryanlid/pen/GLOdwE/

Blob 对象的 slice 方法

用于从 Blob 对象所代表的原始二进制数据中抽离一部分数据。

var newBlob = blob.slice(start, end, contentType);

var file = document.getElementById('file').files[0];
if (file) {
  // 复制file对象
  var fileClone = file.slice();
  // 复制file对象
  var fileClone2 = file.slice(0, file.size);
  // 复制file对象的后半部分
  var fileChunkFromEnd = file.slice(-Math.round(file.size / 2));
  // 复制file对象的前半部分
  var fileChunkFromStart = file.slice(0, Math.round(file.size / 2));
  var fileNoMetadata = file.slice(0, -150, 'application/experimental');
}

FileReader 对象

FileReader 对象主要用于将文件读入内存，并读取文件中的数据

事件

onabort 数据读取中断时
onerror 数据读取错误时
onloadstart 数据读取开始时
onprogress 数据读取中
onload 数据读取成功完成时
onloadend 数据读取完成时触发，无论成功还是失败

var result = document.getElementById('result');
var input = document.getElementById('input');

function readFile() {
  var file = document.getElementById('file').files[0];
  var reader = new FileReader();
  reader.onload = function (e) {
    result.innerHTML = '<img src="' + this.result + '"alt=""/>';
    alert('load');
  };
  reader.onprogress = function (e) {
    alert('progress');
  };
  reader.onabort = function (e) {
    alert('abort');
  };
  reader.onerror = function (e) {
    alert('error');
  };
  reader.onloadstart = function (e) {
    alert('loadstart');
  };
  reader.onloadend = function (e) {
    alert('loadend');
  };
  reader.readAsDataURL(file);
}

// 时间顺序 loadstart progress load loadend

方法

方法	描述
readAsText	以文本的形式读取 Blob 对象（第二个参数可以设置文本的编码方式，默认 UTF-8）
readAsBinaryString	以二进制字符串读取 Blob 对象
readAsDataURL	以 Data URL 字符串读取 Blob 对象
readAsArrayBuffer	以 ArrayBuffer 读取 Blob 对象

演示：https://codepen.io/oonnnoo/pen/yrKagM/

FileReader readAsArrayBuffer 示例

首先将文件中前 4 个字节中的内容复制到一个 Blob 对象中，再将 Blob 对象中的数据读取为一个 ArrayBuffer 对象，然后使用 DataView 读取该 ArrayBuffer 缓存区中位于开头的 32 位整数，最后通过比较整数值来判断文件类型

演示：https://codepen.io/oonnnoo/pen/jRzMRL/

更新记录

2019-04-18 21:08:02 首次发布

HTML5 中的文件 API

loading 动画