FileReader
1、是h5中新增的类，用来对input中type='file'类型进行处理的类
2、能够对上传的文件进行预先读写，实现预览效果
文件读写是三种方式:
1、文本读取
2、图片url读取(读取结果即为img元素的src属性)
3、二进制流读取
用法:
var fileReader=new FileReader();
文本
fileReader.readAsText(从input元素中获取的文件流即input.files中选择的文件,'GB2312'解决中文乱码/可选);
文件读取完毕执行回调函数
fileReader.onload=function(){
//读取文件内容
console.log(fileReader.result);
}
图片
fileReader.readAsDataURL(从input元素中获取的文件流即input.files中选择的文件);
//图片读取完毕执行回调函数
fileReader.onload=function(){
//读取图片内容
console.log(fileReader.result);
}
代码示例：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<body>
<input type="file" multiple='multiple'>
<button>上传文件</button>
<div style="width:200px;height: 200px;border: solid 1px black;">
</div>
<img src="" alt="">
<script>
var btn=document.querySelector('button');
var input=document.querySelector('input');
var div=document.querySelector('div');
var img=document.querySelector('img');
btn.onclick=function()
{
//文本读取
var fileReader=new FileReader();
fileReader.readAsText(input.files[0],'GB2312');
fileReader.onload=function()
{
div.innerHTML=fileReader.result;
}
//图片读取
var fileReader=new FileReader();
fileReader.readAsDataURL(input.files[0]);
fileReader.onload=function()
{
img.src=fileReader.result;
}
}
</script>
</body>
</html>
