js通过filereader接口读取文件的实例代码

来源：懂视网责编：小OO 时间：2020-11-27 20:22:43

js通过filereader接口读取文件的实例代码

使用FileReader接口的readAsDataURL方法实现图片的预览。源代码。-- 这里用来显示图片结果-->；<；/p>；<；/body>；<；/html>；【相关推荐】；1.免费js在线视频教程。2.JavaScript中文参考手册。3.php.cn独孤九贱（3）－JavaScript视频教程。

推荐度：

点击下载本文 文档为doc格式

导读使用FileReader接口的readAsDataURL方法实现图片的预览。源代码。-- 这里用来显示图片结果-->；<；/p>；<；/body>；<；/html>；【相关推荐】；1.免费js在线视频教程。2.JavaScript中文参考手册。3.php.cn独孤九贱（3）－JavaScript视频教程。

这篇文章主要为大家详细介绍了通过filereader接口读取文件，使用readAsDataURL方法预览图片的相关方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

使用FileReader接口的readAsDataURL方法实现图片的预览。

源代码：

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>通过filereader接口读取文件</title> 
<script type="text/javascript"> 
function readAsDataURL() 
{ 
 if(typeof FileReader=='undifined') //判断浏览器是否支持filereader 
 { 
 result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>"; 
 return false; 
 } 
 var file=document.getElementById("imagefile").files[0]; 
 if(!/image\/\w+/.test(file.type)) //判断获取的是否为图片文件 
 { 
 alert("请确保文件为图像文件"); 
 return false; 
 } 
 var reader=new FileReader(); 
 reader.readAsDataURL(file); 
 reader.onload=function(e) 
 { 
 var result=document.getElementById("result"); 
 result.innerHTML='<img src="'+this.result+'" alt=""/>' 
 } 
 
} 
</script> 
</head> 
 
<body> 
<p> 
 <label>请选择一个文件：</label> 
 <input type="file" id="imagefile" /> 
 <input type="button" value="读取图像" onClick="readAsDataURL();" /> 
</p> 
<p name="result" id="result"> 
 <!-- 这里用来显示图片结果--> 
</p> 
</body> 
</html>

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程