Time Bomb Veela
  1. 1 Time Bomb Veela
  2. 2 BREAK IN TO BREAK OUT Lyn
  3. 3 One Last You Jen Bird
  4. 4 かかってこいよ NakamuraEmi
  5. 5 Life Will Change Lyn
  6. 6 Hypocrite Nush
  7. 7 Libertus Chen-U
  8. 8 Warcry mpi
  9. 9 Flower Of Life 发热巫女
  10. 10 Last Surprise Lyn
2017-04-28 18:37:02

综述HTML5 File API

HTML5新增了一组与本地文件进行交互的API。这组API增强了前端操作文件数据的能力,以前通常要借助后端实现的一些功能,例如断点续传,图片预览等现在也可以在前端轻松的完成了。


文件访问接口

Blob

这是文件数据的核心接口,其他操作数据的API都是建立在该对象的基础上。一个Blob对象就表示一个二进制大型文件对象。通过构造函数Blob可以实现原始数据到可操作数据的转化。示例如下:

let a = {hello: 'world'};
let blob = new Blob([JSON.stringify(debug, null, 2)], {type: 'application/json'});

该构造函数接受两个参数,第一个参数是包含实际数据的数组,第二个参数是数据的类型。Blob对象的属性都是只读的,拥有的属性和方法如下:

  • Blob.isClosed

布尔值,指示Blob.close()是否在该对象上调用过,关闭的blob对象不可读。

  • Blob.size

Blob对象中包含数据的大小。

  • Blob.type

一个字符串,表明该Blob对象包含数据的MIME类型。如果类型未知则该值为空字符串。

  • Blob.close()

关闭Blob对象,以便释放资源。

  • Blob.slice()

将二进制数据按照字节分块,返回新的Blob对象,包含了源对象指定范围内的数据。


File

该接口继承自Blob对象,提供了有关文件的信息。新增的属性有:

  • File.lastModified

返回当前File对象所引用文件的最后修改时间。

  • File.name

返回当前File对象所引用文件的名字。

  • File.size

返回文件大小。

  • File.type

返回文件的MIME类型。

FileList

该接口针对的是表单的file控件,结构上等同于file对象的数组表现形式。我们不可以手动构造FileList对象,只能被动的读取并通过JS访问内部的file对象。


选择文件

表单输入

要选择文件最直接的方法就是使用input元素了,例子如下:

<input type="file" id="input" multiple>

通过multiple属性控制选择文件的数量。所有选择的文件都被包含在FileList对象中,可以通过DOM来获取。

let selectedFile = document.getElementById('input').files

拖放操作

用户还可以将本地文件拖放到目的区域来实现选择。

首先指定一个拖放操作的目的区域并绑定上相关拖放事件:

let dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragover', dragover, false);
dropbox.addEventListener('drop', drop, false);

阻止拖放事件的默认行为后实现自定义逻辑:

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  let files = e.dataTransfer.files; // 获取成功
}

读取文件

FileReader

读取文件的核心是FileReader对象,该对象允许web应用异步读取File或Blob对象,读取到数据后我们就可以在应用进行各种各样的处理了。通过构造函数FileReader()创建该对象。该对象读取文件时有3个状态常量表示读取进度:

  • 0:EMPTY,还没有加载任何数据。
  • 1:LOADING,数据正在被加载。
  • 2::DONE,已完成全部读取请求。

对象的属性都是只读的,如下:

  • error:读取文件发生的错误。
  • readyState:表明对象的当前状态,值为3个状态常量之一。
  • result:读取到的文件内容,这个属性只在读取完成之后有效,并且数据格式取决于读取操作的方法。

对象的方法如下:

  • abort()

中止读取操作,返回时状态常量的值为DONE。

  • readAsArrayBuffer()

读取指定Blob对象或File对象中的内容,读取完成时readyState的值变为DONE,同时result属性将包含一个ArrayBuffer对象表示读取内容。

  • readAsBinaryString()

使用方法同上,result属性包含原始二进制数据表示读取内容。

  • readAsDataURL()

使用方法同上,result属性包含一个基于base64编码的data-uri对象。

  • readAsText()

使用方法同上,result属性包含一个字符串表示读取内容,文本编码格式是UTF-8,可以通过可选格式参数指定其他编码格式。

URL

除了FileReader构造函数外,我们还可以使用URL.createObjectURL方法生成一个URL对象,该方法接受参数为File对象或Blob对象。通过该方法生成的URL代表着资源的临时指向地址,生存时间等于网页的存在时间,也可以手动调用URL.revokeObjectURL方法让其失效。


读取文件相关事件监听

当读取文件时,会有一系列事件反应读取的状态,这些事件可以被FileReader监听,也可以被XMLHttpRequest调用,同样也适用于img和video等资源标签。

  • loadstart

当程序开始加载时触发。

  • progress

当加载正在进行中时触发。

  • error

当加载失败时触发。

  • abort

当加载被正常终止时触发。

  • load

当加载完成时触发。

  • loadend

当资源加载进度停止时被触发,例如错误出现时或正常中止时。

-- EOF --

添加在分类「 前端开发 」下,并被添加 「HTML」「HTTP」 标签。