|
|
|
|
|
| FormData |
FileReade |
FileList |
File |
|
一、FormData
- FormData 是 Html5 新加进来的一个类,可以模拟表单数据
- 利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件
- 可以先通过 new 关键字创建一个空的 FormData 对象，然后使用 append() 方法向该对象里添加字段（字段的值可以是一个 File对象或者字符串，剩下其他类型的值都会被自动转换成字符串)
- 也可以 new 的同时直接传入表单对象，从而创建有值的FormData对象
- 构造函数
FormData (optional HTMLFormElement form): (可选) 一个HTML表单元素,可以包含任何形式的表单控件,包括文件输入框.
- 方 法
append(key, value):来添加数据，如果指定的key不存在则会新增一条数据，如果key存在，则添加到数据的末尾
get(key)、getAll(key):来获取对应的 value
set(key, value): 来设置修改数据，如果指定的 key 不存在则会新增一条，如果存在，则会修改对应的value值。
has(key): 来判断是否对应的 key 值
delete(key)，来删除数据
二、FileReade
- 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容
- File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
- 构造函数
FileReader():返回一个新构造的FileReader。
- 属性
FileReader.error: 只读,一个DOMException，表示在读取文件时发生的错误 。
FileReader.readyState: 只读,表示FileReader状态的数字。取值如下：
| 常量名 |
值 |
描述 |
| EMPTY |
0 |
还没有加载任何数据 |
| LOADING |
1 |
数据正在被加载 |
| DONE |
2 |
已完成全部的读取请求 |
FileReader.result: 只读,文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。
- 事件
FileReader.onabort:处理abort事件。该事件在读取操作被中断时触发。
FileReader.onerror:处理error事件。该事件在读取操作发生错误时触发。
FileReader.onload:处理load事件。该事件在读取操作完成时触发。
FileReader.onloadstart:处理loadstart事件。该事件在读取操作开始时触发。
FileReader.onloadend:处理loadend事件。该事件在读取操作结束时（要么成功，要么失败）触发。
FileReader.onprogress:处理progress事件。该事件在读取Blob时触发。
- 方法
FileReader.abort():中止读取操作。在返回时，readyState属性为DONE。
FileReader.readAsArrayBuffer():开始读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
FileReader.readAsBinaryString():开始读取指定的Blob中的内容。一旦完成，result属性中将包含所读取文件的原始二进制数据。
FileReader.readAsDataURL():开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容。
FileReader.readAsText():开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
三、FileList
- 一个FileList对象通常来自于一个HTML input元素的
files属性,你可以通过这个对象访问到用户所选择的文件.该类型的对象还有可能来自用户的拖放操作,查看DataTransfer对象了解详情.
- 如果一个input元素拥有multiple属性,则可以用它来选择多个文件.
<input id="fileItem" type="file">
<script >
// 下面的一行代码演示如何获取到一个FileList对象中的第一个文件`File`对象:
var file = document.getElementById('fileItem').files[0];
</script>
- 方法
item(index)：根据给定的索引值.返回FileList对象中对应的File对象.
- 属性
length:一个只读的整数值,用来返回该FileList对象中的文件数量
四、 File
- 文件（File）接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。
- 通常情况下， File 对象是来自用户在一个
<input> 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，特权代码可以创建代表任何本地文件的File对象，而无需用户交互
- Web应用程序中使用文件
- 构造函数
File():返回一个新构建的文件对象（File）。
- 属性
File.lastModified: 只读返回当前 File 对象所引用文件最后修改时间，自 UNIX 时间起始值（1970年1月1日 00:00:00 UTC）以来的毫秒数。
File.lastModifiedDate: 只读 返回当前 File 对象所引用文件最后修改时间的 Date 对象。
File.name: 只读返回当前 File 对象所引用文件的名字。
File.size: 只读返回文件的大小。
File.webkitRelativePath:只读 返回 File 相关的 path 或 URL。
File.type:只读 返回文件的 多用途互联网邮件扩展类型（MIME Type）
- 方法
File 接口没有定义任何方法，但是它从 Blob 接口继承了以下方法：
Blob.slice([start[, end[, contentType]]])
返回一个新的 Blob 对象，它包含有源 Blob 对象中指定范围内的数据。
网友评论