JavaScript通过filereader接口读取文件


Posted in Javascript onMay 10, 2017

使用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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
11款基于Javascript的文件管理器
Oct 25 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
js中判断数字\字母\中文的正则表达式 (实例)
Jun 29 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
简单实现js拖拽效果
Jul 25 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
关于vue-router路径计算问题
May 10 #Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 #Javascript
Bootstrap table使用方法总结
May 10 #Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 #Javascript
vue-axios使用详解
May 10 #Javascript
详解axios在vue中的简单配置与使用
May 10 #Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 #jQuery
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
Python学习之Django的管理界面代码示例
2018/02/10 Python
python实现简单的文字识别
2018/11/27 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
自我评价范文分享
2014/01/04 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
村级换届选举方案
2014/05/10 职场文书
工程项目经理任命书
2014/06/05 职场文书
统计工作个人总结
2015/03/03 职场文书
应届毕业生自荐信
2015/03/04 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
分享Python获取本机IP地址的几种方法
2022/03/17 Python
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技