HTML5-简单文件操作

文件操作

简介

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

语法格式:

html 复制代码
<input type="file" multiple>

属性

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

  • accept:用于设置文件的过滤类型(MIME类型)

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

    html 复制代码
    <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/* 所有视频文件

实例

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

运行结果

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

File对象

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

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

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

  • 首先需要获取FileList对象

  • 然后通过数组下标形式来获取

File对象属性

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

实例:File对象的属性

html 复制代码
<!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>

运行结果

实例:转化单位

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 在读取数据过程中周期性调用
相关推荐
桂月二二4 小时前
探索前端开发中的 Web Vitals —— 提升用户体验的关键技术
前端·ux
hunter2062065 小时前
ubuntu向一个pc主机通过web发送数据,pc端通过工具直接查看收到的数据
linux·前端·ubuntu
qzhqbb5 小时前
web服务器 网站部署的架构
服务器·前端·架构
刻刻帝的海角5 小时前
CSS 颜色
前端·css
浪浪山小白兔6 小时前
HTML5 新表单属性详解
前端·html·html5
lee5767 小时前
npm run dev 时直接打开Chrome浏览器
前端·chrome·npm
2401_897579657 小时前
AI赋能Flutter开发:ScriptEcho助你高效构建跨端应用
前端·人工智能·flutter
limit for me7 小时前
react上增加错误边界 当存在错误时 不会显示白屏
前端·react.js·前端框架
浏览器爱好者7 小时前
如何构建一个简单的React应用?
前端·react.js·前端框架
qq_392794488 小时前
前端缓存策略:强缓存与协商缓存深度剖析
前端·缓存