HTML5-简单文件操作

文件操作

简介

概念:可以通过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>

运行结果
HTML5-简单文件操作_第1张图片

实例:转化单位

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 在读取数据过程中周期性调用

你可能感兴趣的:(html+css,html5,前端,html)