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 相关文章推荐
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
jquery实现checkbox 全选/全不选的通用写法
Feb 22 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
JS实现容器模块左右拖动效果
Jan 14 Javascript
js实现飞机大战小游戏
Aug 26 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下使用iconv需要注意的问题
2010/11/20 PHP
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
培养自己的php编码规范
2015/09/28 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
js动态创建及移除div的方法
2015/06/03 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python实现自动重启本程序的方法
2015/07/09 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
如何利用python发送邮件
2020/09/26 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
英国医生在线预约:Top Doctors
2019/10/30 全球购物
公司同意接收函
2014/01/13 职场文书
四下基层实施方案
2014/03/28 职场文书
合作合同协议书范本
2015/01/27 职场文书
单位计划生育责任书
2015/05/09 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers