FileReader的接口方法
- FileReader的接口方法有四个,其中三个用来读取文件,另一个用来终端读取。无论读取成功或者失败。方法并不会返回读取结果。这一结果存储在result属性中。
- readAsBinaryString(file): 将文件读取成二进制文件
- readAsText(file[,enconing]): 将文件读取为文本
- readAsDataURL(file): 将文件读取为DataURL。
- abort(none): 中断读取操作
FileReader接口事件
- FileReader接口包含了一套完整的事件模型,用于捕获读取文件时的状态。
- onabort: 中断加载
- onerror:出错是触发
- onloadstart: 开始读取时触发
- onprogress: 正在读取
- onload: 读取成功
- onloadend: 读取完成,无论成功或者失败都会被调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<input type="file" name="test" id="" class="input">
<img src="" alt="" height="200" width="300" class="img">
<button class="show-img">预览图片</button>
<button class="show-bit-btn">读取二进制</button>
<div class="show-bit"></div>
<script>
var fileInput = document.querySelector('.input');
var img = document.querySelector('.img');
var showBtn = document.querySelector('.show-img');
var showBitBtn = document.querySelector('.show-bit-btn');
var showBitDiv = document.querySelector('.show-bit');
if (typeof FileReader == 'undefined') {
alert('哈哈,土鳖,你的浏览器不支持FileReader')
fileInput.setAttribute('disabled', 'disabled')
}
var file;
fileInput.addEventListener('change', function () {
file = this.files[0];
}, false)
console.log('helo')
showBtn.addEventListener('click', function () {
if (typeof file == 'undefined') {
alert('请先选择图片')
return
}
var reader = new FileReader();
reader.addEventListener('load', function () {
console.log('reader', reader)
img.src = reader.result;
}, false)
reader.readAsDataURL(file)
})
showBitBtn.addEventListener('click', function () {
if (typeof file == 'undefined') {
alert('请先选择图片')
return
}
var reader = new FileReader();
reader.readAsBinaryString(file)
reader.addEventListener('loadstart',function (){
console.log('开始读取', this)
})
reader.addEventListener('progress',function (){
console.log('读取中', this)
})
reader.addEventListener('load', function () {
showBitDiv.innerHTML = reader.result
})
reader.addEventListener('loadend',function (){
console.log('读取结束', this)
})
})
</script>
</body>
</html>