File API 二

本文介绍了HTML5中的FileAPI,包括FileList、File、Blob及FileReader对象的使用方法。详细解释了如何通过FileReader读取文件内容到内存中,并提供了读取文件为DataURL的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

File API 包含 FileList 对象,FIle对象,Blob对象,FileReader对象。

FileList表示用户选择列表,HTML5中是可以使用多文件。

Blob对象有两个属性,size和type,File对象继承与Blob对象。通过type可以确定文件类型,比如判断图片文件类型:/image\/\w+/.test(file.type)

FileReader把文件读入内存,并读文件内容。

FIleReader的5个对象:readAsBinaryString(将文件读取为二进制字符串), readerAsText(读取为文本数据), readAsDataUrl(使用url), abort(中断);

6个事件:onabort(中断触发), onerror(出错触发), onloadstart(开始读取触发), onprogress(读取中触发), onload(读取成功触发), onloadend(始终都会触发)

读取为url例子(其他的类似):
var reader = new FileReader();
reader.readAsDataUrl(file);
reader.onload = function(e){
	img.src = this.result;
};

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值