1、FileReader接口的方法
FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本 ，第二个参数为文本的编码方式，默认值为 UTF-8
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="file" name="file" id="file"></br>
<div id="picBox">
<img src="" width="300" height="200" id="img"/>
</div>
</body>
<script type="text/javascript">
var flObj = document.getElementById("file");
flObj.onchange=function(){
var file=flObj.files[0]; //因为每次只上传了一张图片，所以获取到flObj.files[0];
var fReader=new FileReader();
if(file.type.indexOf("image")!=-1){ //判断文件类型是否为image
fReader.readAsDataURL(file); // 将文件读取为DataURL
console.log(fReader);
fReader.onload=function(e){
console.log(this.result);
document.getElementById("img").src= this.result;
}
}else if(file.type.indexOf("text")!=-1){ //判断文件类型是否为text
fReader.readAsText(file，“GBK”); //将文件读取为文本
fReader.onload=function(e){
console.log(this.result);
var pObj=document.createElement("p");
pObj.innerHTML = this.result;
document.getElementById("picBox").appendChild(pObj);
}
}
}
</script>
</html>
网友评论