fileReader读取文件 

<!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>

 

posted @ 2017-12-30 20:05  勤奋的园  阅读(471)  评论(0)    收藏  举报