我们想： 可以吧上传的文件，内容显示到页面？ 或者 上传完毕图片显示缩略图到页面上。
通过FileReader对象我们可以读取本地存储的文件，使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer
3.1 Files对象
由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过上传文件后得到的是一个Files对象（伪数组形式）。
3.2FileReader对象
HTML5新增内建对象，可以读取本地文件内容。var reader = new FileReader; 可以实例化一个对象
实例方法
1、readAsDataURL() 以DataURL形式读取文件
事件监听
onload 当文读取完成时调用
属性
result 文件读取结果
生成缩略图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" name="" id="" multiple >
<img src="" alt="" width="100">
<script>
// 我们想： 可以吧上传的文件，内容显示到页面？ 或者 上传完毕图片显示缩略图到页面上。。。
// 1. 上传我们的文件 借助于 文件域 input file
//
var file = document.querySelector("input");
var img = document.querySelector("img");
file.onchange = function() { // onchange 当发生改变的时候 下拉菜单 select 也是这个事件
// console.log("选择了文件");
// console.log(file);
// for( var k in file) {
// console.log( k + "~~~~" + file[k]);
// }
console.log(this.files); // 上传文件的集合 可以是一个文件也可以是很多
// 2. 选择我们要的文件， 进行 读取 fileReader 文件里面的内容
// 初始化了一个 reader 对象
var reader = new FileReader();
// reader.readAsText(文件对象);
// 读取 this.files[0] 文件里面的内容
reader.readAsDataURL(this.files[0]);
// 当这个文件的内容读取完毕之后 ，会把内容存放到 result里面
// 3. 把读取的内容显示到 页面中..
// reader 已经读取完毕 而且读取的内容 存放到了 result里面了
reader.onload = function() {
// console.log(this.result);
// 把生成的内容 赋值给 图片 src
img.src = this.result;
}
}
</script>
</body>
</html>显示记事本内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" name="" id="" multiple >
<div></div>
<script>
// 我们想： 可以吧上传的文件，内容显示到页面？ 或者 上传完毕图片显示缩略图到页面上。。。
// 1. 上传我们的文件 借助于 文件域 input file
//
var file = document.querySelector("input");
var div = document.querySelector("div");
file.onchange = function() { // onchange 当发生改变的时候 下拉菜单 select 也是这个事件
// console.log("选择了文件");
// console.log(file);
// for( var k in file) {
// console.log( k + "~~~~" + file[k]);
// }
console.log(this.files); // 上传文件的集合 可以是一个文件也可以是很多
// 2. 选择我们要的文件， 进行 读取 fileReader 文件里面的内容
// 初始化了一个 reader 对象
var reader = new FileReader();
// reader.readAsText(文件对象);
// 读取 this.files[0] 文件里面的内容
reader.readAsText(this.files[0]);
// 当这个文件的内容读取完毕之后 ，会把内容存放到 result里面
// 3. 把读取的内容显示到 页面中..
// reader 已经读取完毕 而且读取的内容 存放到了 result里面了
reader.onload = function() {
div.innerHTML = this.result;
}
}
</script>
</body>
</html>