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 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
js自定义事件代码说明
Jan 31 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
javascript如何使用bind指定接收者
May 04 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
May 17 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 Javascript
vue实现购物车结算功能
Jun 18 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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 压缩文件夹的类代码
2009/11/05 PHP
php学习之简单计算器实现代码
2011/06/09 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
简单JS代码压缩器
2006/10/12 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
OpenLayer3自定义测量控件MeasureTool
2020/09/28 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Python类如何定义私有变量
2020/02/03 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
预备党员的自我评价
2014/03/12 职场文书
工作会议方案
2014/05/21 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Elasticsearch 索引操作和增删改查
2022/04/19 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android