FileReader的方法与属性
| 方法名 |
参数 |
描述 |
| readAsText |
(file,encoding) |
以文本文件的方式来读取,其中encoding参数指定读取该文件时所用的字符集,该参数的默认值是UTF-8 |
| readAsBinaryString |
(file) |
以二进制方式来读取文件.通常用于AJAX上传数据到服务器中 |
| readAsArrayBuffer |
(file) |
将文件内容读取到ArrayBuffer对象中 |
| readAsDataURL |
(file) |
以DataURL方式来读取文件,这种方式也可以用于读取二进制文件,只是会采用base64方式把文件内容编码成DataURL格式的字符串 |
| abort |
|
停止读取 |
FileReader的事件
| 事件 |
描述 |
| onloadstart |
开始读取数据时触发该事件指定的函数 |
| onprogress |
正在读取数据时触发该事件指定的函数 |
| onload |
成功读取数据后触发该事件指定的函数 |
| onloadend |
读取数据完成后触发该事件指定的函数 |
| onerror |
读取失败时触发该事件指定的函数 |
检测浏览器是否支持FileReader对象
var reader = null;
if (window.FileReader) {
reader = new FileReader();
} else {
window.alert('部分功能无法得到浏览器支持,请升级浏览器');
}
function chkFR() {
if (typeof FileReader === 'undefined') {
window.alert('部分功能无法得到浏览器支持,请升级浏览器');
return false;
}
}
chkFR();
使用FileReader读取文本文件
<body>
<input type="file" name="" id="file">
<p id="res"></p>
<script>
var reader = null;
var $file = document.getElementById('file');
$file.addEventListener('change', () => {
if (window.FileReader) {
reader = new FileReader();
} else {
alert('error');
return false;
}
reader.readAsText($file.files[0], 'utf8');
reader.onload = () => {
document.getElementById('res').innerText += reader.result;
}
}, false);
</script>
</body>
使用FileReader读取图片文件
<body>
<input type="file" name="" id="file">
<div id="imgBox"></div>
<script>
var reader = null;
var $file = document.getElementById('file');
$file.addEventListener('change', () => {
if (window.FileReader) {
reader = new FileReader();
reader.readAsDataURL($file.files[0]);
reader.onload = () => {
var img = new Image();
img.src = reader.result;
document.getElementById('imgBox').appendChild(img);
}
} else {
window.alert('error');
return false;
}
}, false);
</script>
</body>