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 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
May 24 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
原生js实现电商侧边导航效果
Jan 19 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
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
JS 网站性能优化笔记
2011/05/24 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue将后台数据时间戳转换成日期格式
2019/07/31 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python私有属性和方法实例分析
2015/01/15 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python3读取UTF-8文件及统计文件行数的方法
2015/05/22 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python内置模块turtle绘图详解
2017/12/09 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python创建文件备份的脚本
2018/09/11 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
Python3远程监控程序的实现方法
2019/07/15 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
利用python 读写csv文件
2020/09/10 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
Java面试题:为什么要用Java
2012/05/11 面试题
校本课程教学计划
2015/01/19 职场文书
上课说话检讨书
2015/01/27 职场文书
中学教代会开幕词
2016/03/04 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python