fileList对象和file对象
html5 中的 input[type=’file’] 的标签有 multiple 属性,允许用户选择多个文件,fileList 对象则是保存了这些文件的列表,列表每一项都是一个 file 对象
属性
- name :文件名
- type :文件类型。图片类型可通过image/开头关键字限制只允许上传图片
- size :文件大小
- lastModified :文件最后修改时间
input:file 对象中还存在一个 accept 属性,可以用来规定能够通过文件上传进行提交的文件类型。
accept=”image/*” 可以用来限制只允许上传图像格式。但是在 Webkit 浏览器下却出现了响应滞慢的问题,要等上好几秒才弹出文件选择框。
解决方法就是将 ‘‘ 通配符改为指定的 *MIME 类型。
应用
多文件FileList
链接请戳 多文件fileList
|
|
文件预览
链接请戳 文件预览
|
|
Blob对象
表示一个不可变,原始数据的类似文件对象。区别于 mysql 的 blob 类型(二进制容器),html5 中的 blob 对象除了可以存储二进制数据之外,还可设置数据的 mime 类型,从某种程度讲,实现了文件的存储。
而 html5 中的 file 对象则是基于 blob 对象继承扩展而来。
构造函数
|
|
所以需要关键字 new 来声明,旧式的 BlobBuilder 方法已经过时,不在讨论。
|
|
属性
- isClosed:bool 是否为关闭状态,关闭状态的 blob 对象不可读
- size:数据大小
- type:字符串,表明对象包含数据的数据类型
方法
close()
关闭 blob 对象,释放底层资源
slice([start[, end[, contentType]]])
返回一个新的包含源 blob 对象指定数据的 blob 对象
用法
适用类型数组和blob创建一个url
|
|
事实上我并没得到这样的字符串,我觉得我可能被骗了。。
Blob中提取数据
|
|
使用 FileReader 以外的方法读取到的内容可能会是字符串或是数据 URL。
|
|
通过url下载文件
window.URL对象可以为BLob对象生成一个网络地址,结合a标签的download属性可以实现url下载文件。
|
|
我们知道,img的src属性及background的url属性,都可以通过接收图片的网络地址或base64来显示图片,同样的,我们也可以把图片转化为Blob对象,生成URL(URL.createObjectURL(blob)),来显示图片。
Ps:就先写到这,剩下几个demo再说,感觉这个东西没这么简单。2017年7月24日22点27分