html5文件域的自动获取,HTML5 文件域+FileReader 读取文件(一)

本文详细介绍了HTML5中文件上传功能的增强,包括通过`<input type='file'>`元素的`accept`和`multiple`属性实现多文件选择和文件类型限制。同时,重点讲解了FileList对象和File对象的使用,如获取文件名、类型和大小等信息。此外,还展示了如何使用FileReader对象读取文件内容,包括读取文本、二进制和DataURL,并提供了实时监控文件读取进度的示例。强调了客户端验证的局限性,指出真正的文件上传需在服务器端进行过滤和处理。

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

在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点:

每次只能选择一个文件进行上传

客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容

一、FileList对象和File对象

HTML5为type='file' 的元素增加了两个属性。

accept:该属性控制允许上传的文件类型。该属性为一个或多个MIME类型字符串。多个MIME类型字符串之间应以都好分割。

multiple:该属性设置是否允许选择多个文件

JavaScript可以通过files属性访问type='file'的元素生成的文件上传域的所有文件,该属性返回一个FileList对象,FileList对象相当于一个数组,开发者可以使用类似于数组的方法来访问该数组内的每个File对象。

File对象是一个JavaScript对象,可以通过该对象获取浏览器的所有文件信息。File对象包含如下属性。

name:返回该File对象对应的文件的文件名, 不包括文件路径部分

type:返回该File对象的文件的MIME类型字符串。

size:返回该File对象的对应的文件的大小,字节单位

实例:

预览图片:

varimgInput=document.getElementById('images');

imgInput.onchange= function() {//1.获取所有选中文件列表

varfileList=imgInput.files;//2.遍历显示信息

for(vari= 0; i

vardiv=document.createElement('div');

div.innerHTML= "第" +(i+ 1)+ "个文件的文件名:" +file.name+ ",文件类型:" +file.type+ ",文件大小:" +file.size;//添加到 body中

document.body.appendChild(div);

}

}

显示结果:

提示:该文件选择框设置了accept='image/*'只显示图片。

不要靠accept属性来过滤文件类型,因为这只是客户端的文件类型过滤,这种文件类型过滤是很脆弱的,如果开发者需要进行文件上传,则必须在服务器端对文件类型进行过滤。

二、使用FileReader读取文件内容

FileReader同样是一个JavaScript对象,开发者可以通过该对象在客户端读取 文件上传域所选择的文件内容.关于FileReader

实例1:

读取文本文件:
读取为二进制:
读取为DataURL:

//判断浏览器是否支持FileReader对象

varreaderif(FileReader) {

reader= newFileReader();

}else{

alert('您的浏览器不支持FileReader对象');

}//1.读取为文本

varfile1=document.getElementById('file1');

file1.onchange= function() {varfile=file1.files[0];//判断读取的第一个文件是否是文本文件

if(/text/w+/.test(file.type)) {//以文本的方式读取内容

reader.readAsText(file,'gbk');

reader.onload= function() {

document.getElementById('result').innerHTML=reader.result;

}

}else{

alert('读取的不是文本文件');

}

}//2.读取为二级制

varfile2=document.getElementById('file2');

file2.onchange= function() {varfile=file2.files[0];//以二进制流的方式读取第一个文件

//reader.readAsArrayBuffer(file); //返回二进制数组

reader.readAsBinaryString(file);//返回二进制字符串

reader.onload= function() {

document.getElementById('result').innerHTML=reader.result;

}

}//3.读取为DataURL

varfile3=document.getElementById('file3');

file3.onchange= function() {varfile=file3.files[0];

reader.readAsDataURL(file);

reader.onload= function() {

document.getElementById('result').innerHTML=reader.result;

}

}

FileReader在读取文件的过程中可能多次触发onprogress事件,通过该事件绑定监听器即可实时监控文件的读取进度。

提示:FileReader只是客户端的JavaScript对象,使用FileReader所进行的上传也只是把磁盘上的文件读取到浏览器内存中,并未真正上传到服务器。如果需要真正把客户端文件上传到服务器,则可把文件数据以POST请求方式提交到远程服务器,远程服务器负责接收文件数据,并把数据内容保存到服务器。

实例2:

读取二进制文件:
显示进度:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值