当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript通过filereader接口读取文件

JavaScript通过filereader接口读取文件

2018年05月02日  | 移动技术网IT编程  | 我要评论

使用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> 
<div name="result" id="result"> 
  <!-- 这里用来显示图片结果--> 
</div> 
</body> 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网