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 相关文章推荐
原生js写的放大镜效果
Aug 22 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
javascript简单实现命名空间效果
Mar 06 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
Dec 01 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
js校验开始时间和结束时间
May 26 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
Aug 14 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
php cookie名使用点号(句号)会被转换
2014/10/23 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
Javascript中的数学函数
2007/04/04 Javascript
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
Vue cli构建及项目打包以及出现的问题解决
2018/08/27 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
react 生命周期实例分析
2020/05/18 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
python取余运算符知识点详解
2019/06/27 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
零基础小白多久能学会python
2020/06/22 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
2014年秋季开学典礼致辞
2014/08/02 职场文书
单位接收函范文
2015/01/30 职场文书
个人专业技术总结
2015/03/05 职场文书
加薪通知
2015/04/25 职场文书
推广普通话的宣传语
2015/07/13 职场文书
大学军训心得体会800字
2016/01/11 职场文书
把77A收信机改造成收音机
2022/04/05 无线电