HTML5中的File API
file 提供文件有关的信息
1. file对象
file对象的来源一般分为３种：
（１）在<input type='file'>元素上选择上传文件后返回的Filelist对象； （２）由拖放操作产生的DataTransfer对象； （３）HTMLCanvasElement的mozGetAsFile() API；
此处讨论的是第一种，获取file对象：
let file = e.target.files[0];//获取file 对象，当上传多个文件（图片）时，０表示第一个
属性：
lastModified: 1496803445926;//所引用文件最后修改时间
lastModifiedDate: Wed Jun 07 2017 10:44:05 GMT+0800 (CST) {};//所引用文件最后修改时间的 Date 对象
name: "多Y图.svg";//所引用文件的名字
size: 1384;//返回文件的大小
type: "image/svg+xml";//返回文件的 多用途互联网邮件扩展类型
webkitRelativePath: "";//返回 File 相关的 path 或 URL另，多张图片的上传原理类似，需注意以下三点：
1.设置multiple 2.通过循环取出每张图片，放到指定地方 3.每次循环的时候重新new FileReader()对象
2. FileReader()对象
FileReader() 允许web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
let reader = new FileReader();//创建新对象
属性:
error: 读取文件时发生的错误；
readyState: 表明FileReader对象的当前状态；
result: 读取到的文件内容，只在读取操作完成后才有效，数据格式取决于采用的读取操作；方法:
- abort()： 中止该读取操作。
- readAsText(file, encoding)：以纯文本的形式读取，result中的数据为字符串。
- readAsDataURL(file)：result属性中将包含一个data:url格式的字符串。
- readAsArrayBuffer(file): result属性中将包含一个ArrayBuffer对象。
- readAsBinaryString(file)：读取文件的二进制源码。
事件处理程序
- onabort: 当读取操作被中止时调用
- onerror：当读取操作发生错误时调用
- onload: 当读取操作成功完成时调用
- onloadend: 当读取操作完成时（不管成功还是失败），在onload或者onerror之后调用
- onloadstart: 当读取操作将要开始时调用
- onprogress: 在读取数据过程中周期性调用
3.示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="author" content="oscar999">
<title>read</title>
</head>
<body>
<input type="file" id="file" onchange="handleFiles(this.files)"/>
<div id="filecontent"></div>
<script>
function handleFiles(files){
if(files.length) {
var file = files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("filecontent").innerHTML = e.target.result;
};
reader.readAsText(file);
}
}
</script>
</body>
</html> 相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15