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