<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>file</title>
</head>
<body>
<!--multiple 属性可以让input type = "file" 进行多文件选择-->
<!--当选择文件之后会生成一个FileList文件列表 里面存储的是我们选择 的File对象-->
<input type="file" multiple = "multiple">
<img src="" alt="">
<progress max="100" value="0"></progress>
<script>
var input = document.querySelector("input[type = file]");
//因为文件选择是个异步过程 我们页面打开的时候还没有选择文件
//所以直接输出length会为0.
//我们绑定occhange事件监听文件变化然后输出
input.onchange = function (e) {
//input(this) 的 files 对象则为获取到的 容纳File对象
//的FileList列表
// console.log(this.files);
//获取FileList列表中的File对象并输出
//File 对象有几个属性
//name 当前选择文件的名字
//size 当前文件的大小
//type 当前选择文件的类型
//lastModifiedDate 最后选择文件的时间
//lastModified 最后选择文件的时间的 毫秒数
console.log(this.files[0]);
var file = this.files[0];
// FileReader 用来读取文件的真实数据
var fileReader = new FileReader();
// console.log(file instanceof Blob);
//Object.prototype.toString.call() 检测数据类型
// console.log(Object.prototype.toString.call(file.__proto__.__proto__));
//由于fileReader 获取数据也是个异步过程
//读取数据完成之后会执行这个事件
fileReader.onload = function (e) {
//fileReader.result 就是文件的原始数据
// console.log(fileReader.result);
// document.querySelector("img").src = fileReader.result;
}
//开始读取数据时调用
fileReader.onloadstart = function (e) {
console.log("开始读取数据!")
}
var progress = document.querySelector("progress");
//显示读取进度
fileReader.onprogress = function (e) {
console.log(e);
progress.value = e.loaded / e.total * 100;
}
//Blob 对象 原始数据对象 File对象继承于Blob对象
//读取文件数据以二进制字符串的形式 需要传入一个参数 Blob 对象
//由于File对象继承于Blob对象 所以我们可以传入一个File 对象
fileReader.readAsBinaryString(file);
//读取文件数据以 文本格式 需要传入两个参数 第一个 Blob对象 编码格式例如:"utf-8"
// fileReader.readAsText(file,"utf-8");
//读取文件数据以 base64格式的url数据 传入一个参数 Blob对象
// fileReader.readAsDataURL(file);
}
// console.log(input.files);
</script>
</body>
</html>
网友评论