file对象选择文件
fileReader 对象允许Web应用程序异步读取用户计算机上的文件或数据。
html5中，通过添加 multiple属性，在file控件内允许一次性放置多个文件。
语法：
<input type="file" multiple id="file">例子：
<input type="file" multiple id="file" onchange="node(this)">
<script>
// onchange 在域的内容改变时发生触发。
function node(e){
console.log(e.files);
}
</script>html5 中新增的⽂件操作：
- File：代表⼀个⽂件对象
- FileList：代表⼀个⽂件列表对象，类数组
- FileReader：⽤于从⽂件中读取数据
- FileWriter：⽤于向⽂件中写出数据
调⽤ fileReader 对象的⽅法
创建一个FileReader对象
var fReader = new FileReader();⽅法名 | 参数 | 描述 |
abort | none | 中断读取 |
readAsBinaryString | file | 将⽂件转化为⼆进制码 |
readAsDataURL | file | 将⽂件读取为 DataURL |
readAsText | file,[encoding] | 将⽂件读取为⽂本 |
需要注意的是，⽆论读取成功或是失败，⽅法并不会返回读取结果，这⼀结果(储存在 result 属性中)要⽤ FileReader 处理事件去获取；
readAsText：该⽅法有两个参数，其中第⼆个参数是⽂本的编码⽅式，默认值为 UTF-8。这个⽅法⾮常容
易理解，将⽂件以⽂本⽅式读取，读取的结果即是这个⽂本⽂件中的内容。
readAsBinaryString：该⽅法将⽂件读取为⼆进制字符串，通常我们将它传送到后端，后端可以通过这段字
符串存储⽂件。
readAsDataURL：这是例⼦程序中⽤到的⽅法，该⽅法将⽂件读取为⼀段以 data: 开头的字符串，这段字符串的实质就是Data URL，Data URL是⼀种将⼩⽂件直接嵌⼊⽂档的⽅案。这⾥的⼩⽂件通常是指图像与 html等格式的⽂件。
属性
属性 | 描述 |
error | 在读取文件时发生的错误 |
readyState | 表明FileReader对象的当前状态 |
result | 读取到的文件内容 |
事件监听函数
FileReader 包含了⼀整套完成的事件模型，⽤于捕获读取⽂件时的状态,下⾯这个表格归纳了这些事件。
事件 | 描述 |
onabort | 中断时触发 |
onerror | 出错时触发 |
onload | ⽂件读取成功完成时触发 |
onloadend | 读取完成时触发，⽆论读取成功或失败 |
onloadstart | 读取开始时触发 |
onprogress | 读取中 |
实例：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<!-- 文件上传 input 类型是 file -->
<!-- multiple 属性，表示可以添加多个文件 -->
<label for="">
单图片上传：<input type="file" name="" id="" class="add">
</label>
<label for="">
多文件上传：<input type="file" multiple name="" id="" class="more">
</label>
<label for="">
单个文件上传：<input type="file" name="" id="" class="txt">
</label>
<div class="box">
</div>
<script>
var add = document.querySelector(".add");
var box = document.querySelector(".box");
var more = document.querySelector(".more");
var txt = document.querySelector(".txt");
// 单个文件上传
add.onchange = function () {
// 上传的文件
var fs = this.files[0];
// 实例化FileReader
var myReader = new FileReader();
// readAsDataURL 把文件转为url
myReader.readAsDataURL(fs);
// 文件读取完成时触发
myReader.onload = function () {
console.log(myReader.result);
box.innerHTML = "<img src=" + myReader.result + ">";
}
}
// 多个文件
more.onchange = function () {
// 上传的文件
var fs = [...this.files];
fs.forEach(function (item) {
var myReader = new FileReader();
// readAsDataURL 把文件转为url
myReader.readAsDataURL(item);
// 文件读取完成时触发
myReader.onload = function () {
console.log(myReader.result);
box.innerHTML += "<img src=" + myReader.result + ">";
}
})
}
// 单个 text
txt.onchange = function () {
// 上传的文件
var fs = this.files[0];
// 实例化FileReader
var myReader = new FileReader();
// readAsDataURL 把文件转为url
myReader.readAsText(fs);
// 文件读取完成时触发
myReader.onload = function () {
console.log(myReader.result);
box.innerHTML = "<span>" + myReader.result + "</span>";
}
}
</script>
</body>
</html>
