HTML5-简单文件操作

发布时间：2024年01月04日

文件操作

简介

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

<input type="file" multiple>

属性

  • multiple：表示是否选择多个文件

  • accept：用于设置文件的过滤类型（MIME类型）

    如果想要同时设置多个过滤类型，可以用英文逗号（,）隔开

    <input type="file" accept="image/jpeg,image/png" />

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

属性值说明
image/jepgJEPG图片
image/pngPNG图片
image/gifGIF图片
text/plainTXT文件
text/htmlHTML文件
text/cssCSS文件
text/JavaScriptJS文件
text/xmlXML文件
audio/mpegMP3文件
audio/mp4MP4文件
application/mswordWord文件
application/vnd.ms-powerpointPPT文件
application/vnd.ms-excelExcel文件
application/pdfPDF文件
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在读取数据过程中周期性调用
文章来源:https://blog.csdn.net/AIMing_byte/article/details/135370675
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章