html_html5增强的文件上传域_使用FileReader读取文件内容
时间:2020-06-26 22:14:30
收藏:0
阅读:58
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>
评论(0)