JS实现图片预览的两种方式


Posted in Javascript onJune 27, 2017

考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源。

那么要实现预览有两种方式:一种是用window.URL.createObjectURl方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器。

那么无论那种方法,首先都得得到文件数据,获得文件数据是从files集合中获取。

方式一:

代码如下:

<input type=file id="inp">
<script>
 inp.onchange=function(){
 var file=this.files[0] // 获取input上传的图片数据;
 var img=new Image() ;
 url=window.URL.createObjectURL(file) // 得到bolb对象路径,可当成普通的文件路径一样使用,赋值给src;
 img.src=url;
 //其实也可一句代码搞定,不需要声明那么多变量;img.scr=window.URL.cteateObejectURL(this.files[0]) ;
 然后把img添加到页面就实现预览了
 }
<script>

方式二:

用FileRader对像读取文件.可分为四步;1、创建FileReader对像;2、调用readAsDataURL方法读取文件;3、调用onload事件监听,我们一需要拿到完整的数据,但我们又不知道文件何时读完?,所以需要第三步监听;4、通过FileRader对像r的result属性拿到读取结果。

代码如下:

<input type=file id="inp">
<input type=file id="inp">
<script>
inp.onchange=function(){
 var read=new FileReader() // 创建FileReader对像;
 read.readAsDataURL(this.files[0]) // 调用readAsDataURL方法读取文件;
  read.onload=function(){
   url=read.result // 拿到读取结果;
   var img=new Image();
   img.src=url;
   div.appendChild(img);
 }
 }

以上所述是小编给大家介绍的JS实现图片预览的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
js日期相关函数总结分享
Oct 15 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 #Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 #Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 #Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 #Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 #Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 #Javascript
详解微信小程序 登录获取unionid
Jun 27 #Javascript
You might like
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP中each与list用法分析
2016/01/08 PHP
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
2016/08/21 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
JS中call和apply函数用法实例分析
2018/06/20 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
python在控制台输出进度条的方法
2015/06/20 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Django框架models使用group by详解
2020/03/11 Python
Python是什么 Python的用处
2020/05/26 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
python 制作简单的音乐播放器
2020/11/25 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
单位消防安全制度
2014/01/12 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
环保倡议书500字
2014/05/15 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
离婚协议书格式范本
2016/03/18 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书
《中国古代诗歌散文欣赏》高中语文教材
2019/08/20 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL