简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

JavaScript中如何通过filereader接口读取文件的代码案例

黄舟
发布： 2017-05-14 10:16:42
原创
1885 人浏览过

这篇文章主要为大家详细介绍了通过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==&#39;undifined&#39;) //判断浏览器是否支持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=&#39;<img src="&#39;+this.result+&#39;" alt=""/>&#39; 
  } 
   
} 
</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>
登录后复制

以上是JavaScript中如何通过filereader接口读取文件的代码案例的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
JavaScript，filereader，读取文件
来源：php.cn
上一篇：JavaScript中readAsDataURL读取图像文件的实现方法介绍 下一篇：js实现鼠标拖动功能
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在网络应用程序中显示版本信息的最佳实践是什么？ 我正在开发一个网络应用程序。在网络应用程序中显示版本信息的最佳实践是什么？我正在使用语义版本控制，并且我已经有了semver，例如1.2.0但我很好奇在哪里显示它的最佳方式以及如何...
来自于 2024-04-06 19:13:16
0
2
476
即使 consolelog 具有正确的值，PHP AJAX 也不会动态更新 我正在尝试通过单击按钮来更新$_POST['category']。我正在尝试使用AJAX（第一次）来实现此目的，如在此处的多个其他页面上阅读的那样。我的JS函数当前在控制台中更新了...
来自于 2024-04-02 17:50:59
0
1
396
无需后端服务器即可使用 Javascript 登录 如何在没有后端服务器的情况下获取和发送数据？我承担了一个使用JavaScript创建登录的项目。创建我自己的JSON文件有意义吗？使用localstorage将数据存储在哪里？
来自于 2024-04-01 09:43:17
0
1
336
'阅读器关闭时尝试阅读无效。” 我正在尝试将来自mysqluinlgc#的数据写入.txt文件，但出现错误“阅读器关闭时尝试读取无效。”。代码在这里：StreamWritersr_Produto=newStrea...
来自于 2024-03-31 14:58:58
0
1
273
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！