JS中FileReader类实现文件上传及时预览功能


Posted in Javascript onMarch 27, 2020

FileReader是H5浏览器才支持的JS类,如果不支持H5de浏览器可以使用FormData类实现文件的上传预览,使用可以参考我的下一篇博客:JS中FormData类实现文件上传

JS中FileReader类实现文件上传及时预览功能

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>文件及时预览功能</title>
</head>
<body>
 <input type="file" id="file">
 <img src="" id="preview">

 <script>
 var file = document.querySelector('#file');
 var priview = document.querySelector("#preview");
 // 监听文件上传事件
 file.onchange = function () {
 var reader = new FileReader();
 // 读取文件
 reader.readAsDataURL(this.files[0])
 reader.onload = function () {
 // 将文件读取结果显示到图片中
 priview.src = reader.result;
 }
 }
 </script>
</body>
</html>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

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

Javascript 相关文章推荐
Javascript 网页水印(非图片水印)实现代码
Mar 01 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
开发Node CLI构建微信小程序脚手架的示例
Mar 27 #Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 #Javascript
vue跳转页面的几种方法(推荐)
Mar 26 #Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 #Javascript
JavaScript定时器使用方法详解
Mar 26 #Javascript
js实现时钟定时器
Mar 26 #Javascript
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
深入php数据采集的详解
2013/06/02 PHP
浅析is_writable的php实现
2013/06/18 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
JavaScript中关键字 in 的使用方法详解
2016/10/17 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
node.js中axios使用心得总结
2017/11/29 Javascript
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
餐饮管理自我介绍信
2014/01/15 职场文书
社区综治工作汇报
2014/10/27 职场文书
培训班开班主持词
2015/07/02 职场文书