HTML5-简单文件操作

news2024/9/20 14:47:43

文件操作

简介

概念：可以通过file类型的input控件或者拖放的方式选择文件进行操作
语法格式：

<input type="file" multiple>

属性

multiple：表示是否选择多个文件
accept：用于设置文件的过滤类型（MIME类型）

如果想要同时设置多个过滤类型，可以用英文逗号（,）隔开
```
<input type="file" accept="image/jpeg,image/png" />
```

常见的acept属性取值/MIME类型

属性值	说明
image/jepg	JEPG图片
image/png	PNG图片
image/gif	GIF图片
text/plain	TXT文件
text/html	HTML文件
text/css	CSS文件
text/JavaScript	JS文件
text/xml	XML文件
audio/mpeg	MP3文件
audio/mp4	MP4文件
application/msword	Word文件
application/vnd.ms-powerpoint	PPT文件
application/vnd.ms-excel	Excel文件
application/pdf	PDF文件
image/*	所有图片文件
audio/*	所有声音文件
video/*	所有视频文件

实例

<form action=""> 
<!-- 选择单个文件 -->
<input type="file"/><br/>
<!-- 选择多个文件 -->
<input type="file" multiple />
</form>

运行结果
在这里插入图片描述

注意：为元素添加multiple属性后，就可以选择多个文件了。当选择成功后，按钮右侧不再显示文件的名称，而是显示文件的总量。当鼠标指针移到上面时，就会显示全部上传文件的详细列表

File对象

概念：在文件上传元素中，将会产生一个FileList对象，这是一个类数组对象，表示所有文件的集合。

其中，每一个文件就是一个File对象

想要获取某一个File文件对象

首先需要获取FileList对象
然后通过数组下标形式来获取

File对象属性

属性	说明
name	文件名称
type	文件类型
size	文件大小（单位为B）
lastModifiedDate	文件最后的修改时间

实例：File对象的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>file对象的属性</title>
		<script>
			window.onload=function(){
				//获取FileList对象
				var oFile=document.getElementById("file");
				oFile.onchange=function(){
					//获取第1个文件，即File对象
					var file=oFile.files[0];
					console.log("图片名称为:"+file.name);
					console.log("图片大小为:"+file.size+"B");
					console.log("图片类型为:"+file.type);
					console.log("修改时间为:"+file.lastModifiedDate);
				};
			}
		</script>
	</head>
	<body>		
		<input type="file" id="file" accept="image/*" multiple />
		
	</body>
</html>

运行结果
在这里插入图片描述

实例：转化单位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转化单位</title>
		<script>
			window.onload=function(){
				var oFile=document.getElementById("file");
				oFile.onchange=function(){
					//获取第一个文件
					var file=oFile.files[0];
					//将单位"B"转化为"KB"
					var size=file.size/1024;
					var unitArr=["KB","MB","GB","TB"];
					//转化单位
					for(var i=0;size>1;i++){
						var fileSizeString=size.toFixed(2)+unitArr[i];
						size/=1024;
					}
					//输出结果
					console.log("图片大小为:"+fileSizeString);
				};
			}
		</script>
	</head>
	<body>
		<input type="file" name="file" id="file" accept="image/*" />
	</body>
</html>

运行结果
在这里插入图片描述

FileReader对象

概念：FileReader对象作为文件API用于读取文件。

FileReader对象可以读取文件中的数据和包含读取结果的事件模型。

FileReader对象方法

方法	说明
readAsText	将文本读取为“文本”
readAsDataURL	将文本读取为"DataURL"
readAsBinaryString()	将文本读取为“二进制编码“
readAsArrayBuffer()	将文本读取为一个”ArrayBuffer对象“
abort()	中止读取操作

FileReader对象事件

事件	说明
onabort	中断时触发
onerror	出错时触发
onload	文件读取成功完成时触发
onloadend	读取完成触发，无论成功或失败
onloadstart	读取开始时触发
onprogress	在读取数据过程中周期性调用