<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>fileReader方法示例</title>
<script>
var result=document.getElementById("result");
var file=document.getElementById("file");
function readAsDataURL()
{ var file=document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type))
{
alert("请确保文件类型为图像类型");
return false;
}
var reader=new FileReader();
reader.readAsDataURL(file);//readAsDataURL(file)
reader.onload=function(e){//成功读取后执行
var result=document.getElementById("result");
result.innerHTML='<img src="'+this.result+'" alt="">'
}
}
function readAsText(){
var file = document.getElementById("file").files[0];
var reader = new FileReader();
//将文件以文本形式读入页面
reader.readAsText(file);//readAsText(file,[encoding]),默认编码为utf8
reader.onload=function(f){
var result=document.getElementById("result");
//显示文件
result.innerHTML=this.result;
}
}
</script>
</head>
<body>
<p>
<label>请选择一个文件：</label>
<input type="file" id="file">
<input type="button" value="读取图像" onclick="readAsDataURL()">
<input type="button" value="读取文本文件" onclick="readAsText()">
</p>
<div name="result" id="result">
</div>
</body>
