Dom（十九）文件

最新推荐文章于 2024-10-05 01:22:45 发布

2401_86402690

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量1k

点赞数 11

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/2401_86402690/article/details/141906552

版权

File对象的属性（只读）

属性	说明
lastModified	文件的最近修改时间，从1970年开始的间隔时间
lastModifiedDate	文件的最近修改日期，已经不推荐使用
name	文件名
webkitRelativePath	相对于用户所选择的文件夹路径
size	文件大小，单位是字节
type	文件的MIME类型，比如Image/jpeg

Flie对象的方法

File对象本身没有任何方法，但是Flie对象继承自Blob，Blob有一个方法

Blob.slice([start[,end[,contentType]]])

和File结合使用的对象

FlileList

FileList，可以通过input元素的files属性获得，或者通过Drag和Drop API获取用户拖入到网页中的文件列表

加了multiple属性后，用户就可以加入多个文件，这时候的FlieList就是一个类数组的形式，从下标0开始

属性/方法

属性/方法	说明
length	包含的文件个数，只读
item()	根据索引参数，返回对应的文件

Drag和Drop，拖拽事件

| 名称 | 作用 |

| — | — |

| dragstart | 在拖动时触发 |

| dragend | 在拖动完成时触发 |

| dragenter | 目标元素上绑定dragenter事件,当拖拽元素进入目标元素时触发 |

| dragover | 目标元素上绑定dragover事件, 当拖拽元素在目标元素上移动时触发 |

| drop | 目标元素上绑定drop事件, 并同时取消当前目标元素的dragover的默认事件, 当拖拽元素在目标元素上同时鼠标放开时触发事件.

例: box为目标元素.

box.addEventListener('dragover', function(e){console.log('dragover'); e.preventDefault();});

box.addEventListener('drop', function(e){console.log('drop');});

drop与dragend同时绑定时drop事件先触发 |

let drop = document.querySelector(‘.drop’);

drop.addEventListener(‘dragover’,function (params) { /拖动到目标上方的事件/

params.preventDefault(); /不要执行与事件关联的默认动作/

drop.classList.add(‘over’)

});

drop.addEventListener(‘drop’,function (params) { /拖动到目标位置且松开触发/

params.preventDefault();

drop.classList.remove(‘over’);

console.log(params.dataTransfer.files); // 输出了一个fileList

})

FileReader

用来读取文件内容，读取过程是异步的，文件就是FileList的属性值

属性（都是只读）

属性	说明
error	读文件异常时的错误信息
readyState	FileReader的状态，数值
result	文件内容

当中关于readyState的取值

属性	值	说明
FlileReader.EMPTY	0	尚未加载数据
FlieReader.LOADING	1	正在加载数据
FileReader.DONE	2	读取请求已完成

对象的方法

属性	说明
abort	终止读取文件
readAsArrayBuffer	读取的文件内容以ArrayBuffer的形式返回
readAsDataURL	读取的文件以data:URL的形式返回
readAsText	读取的文件内容以纯文本的形式返回
readAsBinaryString（非标准）	读取的文件内容以原始二进制文本的形式返回

对象的事件（也就是可监听的事件）

事件	说明
onabort	终止读取文件时触发
onerror	读取异常时触发
onload	去读成功时触发
onloadstart	开始读取时触发
onloadend	读取完成（可能成功，也可能失败）时触发
onprogress	读取过程中触发

Blob

Blob，二进制大对象，是binary large object 的缩写，是用来存储类似文件的原始数据。

Blob构造函数

var aBlob=new Blob(array[,options])

array：数组
option：目前纳入规范的只有一个type，也就是类型

例如

var af=[‘

’]

var aBlob=new Blob(af,{type:‘text/html’})

方法

silce([start [,end [,contentType]]])：可以切割文件内容，

start：起始索引
end：结束索引
contentType：指定类型

返回值也是一个blob对象，可以使用这个将大文件分割成多个小文件上传，如果上传中断，下次上传使用相同的方法，可以继续上传，但是前段页面一般不用大文件上传，有很多局限

URL

可以用来创建URL对象，也可以用来创建文件对象的临时地址，供用户或开发者使用，比如本地图片预览等

let url=new URL(urlStr,[base])

urlStr：url字符串
base：如果urlStr是一个相对地址，那么可以指定它的相对目标地址

示例

var url=new URL(‘…/a’,‘http://www.example.com/dogs’)

console.log(url.hostname); //www.example.com

console.log(url.pathname); // /a

方法

方法	说明
URL.createObjectURL()	创建对象在浏览器中的临时访问地址
URL.revokeObjectURL()	回收使用createObjectURL方法创建的临时访问地址

createObjectURL(object)

接收的是一个参数，最常见的是flle或者Blob，返回的是一个可以在浏览器中访问的地址，这个地址的生命周期是当前窗口，窗口关闭或者刷新就无效了

revokeObjectURL(url)

参数就是创建的url地址，将其回收，节省浏览器的资源

示例：

var obURL=URL.createObjectURL(object);

URL.revokeObjectURL(obURL)

实际案例

限制文件的类型

只要将input中的设置accept属性，就可以限制文件类型（image/*是限制图片类型），accpet接收的是mime类型，多个值以逗号分隔，比如“image/png,image/jpeg”，也可以写文件的后缀名“.png,.jpeg”，也支持通配符*，比如“image/*”

限制文件大小，数量

只要拿到对象的fileList就可以判断数量和大小