fileReader 读取文件
本文主要就是说一下 H5 fileReader 的使用
fileReader API
readAsBinaryString 读取二进制流
readAsDataURL 读取图片病进行base-64编码
readAsText 读取文本文件
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fileReader</title>
</head>
<body>
<input type="file" id="lalala">
</body>
<script type="text/javascript">
document.getElementById("lalala").onchange = function(){
fileReader.readAsDataURL(this.id);
}
var fileReader = new FileReader();
function FileReader() {
this.getFile = function (id) {
var file = document.getElementById(id).files[0];
return file;
}
// 二进制流
this.readAsBinaryString = function (fileId) {
var file = this.getFile(fileId);
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function (f) {
console.log(this);
}
};
// data url
this.readAsDataURL = function (fileId) {
var file = this.getFile(fileId);
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (f) {
console.log(this);
}
};
// text
this.readAsText = function (fileId) {
var file = this.getFile(fileId);
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(f){
console.log(this);
}
};
}
</script>
</html>个人纯手打，有不当之处请留言，谢谢！