文件操作
简介
概念：可以通过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 | 在读取数据过程中周期性调用 |
