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 提交和设置表单的值
Dec 19 Javascript
JavaScript 动态改变图片大小
Jun 11 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
轻松实现jquery选项卡切换效果
Oct 10 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
js实现拖拽与碰撞检测
Sep 18 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
一个高ai的分页函数和一个url函数
2006/10/09 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
firefox中JS读取XML文件
2006/12/21 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
python生成IP段的方法
2015/07/07 Python
在主机商的共享服务器上部署Django站点的方法
2015/07/22 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
python 对象和json互相转换方法
2018/03/22 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
jupyter notebook参数化运行python方式
2020/04/10 Python
Keras自定义IOU方式
2020/06/10 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
逃课检讨书
2015/01/26 职场文书
求职简历自我评价2015
2015/03/10 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP