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下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
Aug 03 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
react-router v4如何使用history控制路由跳转详解
Jan 09 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
js验证账户名是否重复
May 26 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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 登录记住密码实现思路
2013/05/07 PHP
php简单统计中文个数的方法
2016/09/30 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
Jquery选择器 $实现原理
2009/12/02 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
简单的js表格操作
2016/09/24 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
python字符串的常用操作方法小结
2016/05/21 Python
python结合selenium获取XX省交通违章数据的实现思路及代码
2016/06/26 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
大学生就业策划书范文
2014/04/04 职场文书
岗位安全生产责任书
2014/07/28 职场文书
防溺水主题班会教案
2015/08/12 职场文书
礼仪培训心得体会
2016/01/22 职场文书
护理工作心得体会
2016/01/22 职场文书
高三化学教学反思
2016/02/22 职场文书
导游词之山东孔庙
2019/11/04 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS