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 打印内容方法小结
Nov 04 Javascript
JQuery写动态树示例代码
Jul 31 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
node 版本切换的实现
Feb 02 Javascript
Node.js API详解之 vm模块用法实例分析
May 27 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使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
Avengerls vs Newbee BO3 第二场2.18
2021/03/10 DOTA
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
jquery中get和post的简单实例
2014/02/04 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
原生js获取元素样式的简单方法
2016/08/06 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
python3中dict(字典)的使用方法示例
2017/03/22 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
django-初始配置(纯手写)详解
2019/07/30 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
Python必须了解的35个关键词
2020/07/16 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
美国高品质个性化珠宝销售网站:Jewlr
2018/05/03 全球购物
H&M旗下高端女装品牌:& Other Stories
2018/05/07 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
表扬信范文
2015/05/04 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
医院岗前培训心得体会
2016/01/08 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫