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插件教程
Aug 25 Javascript
JavaScript 更严格的相等 [译]
Sep 20 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
在vue项目中引入highcharts图表的方法
Jan 21 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 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
smarty高级特性之对象的使用方法
2015/12/25 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
基于Jquery easyui 选中特定的tab
2015/11/17 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
微信小程序常用赋值方法小结
2019/04/30 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
浅谈Python黑帽子取代netcat
2018/02/10 Python
python进行两个表格对比的方法
2018/06/27 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
基于Python数据分析之pandas统计分析
2020/03/03 Python
超市实习总结自我鉴定
2013/09/19 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
房地产财务管理制度
2014/02/02 职场文书
十八大演讲稿
2014/05/22 职场文书
项目经理岗位职责范本
2015/04/01 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
安全教育日主题班会
2015/08/13 职场文书
学习习近平主席讲话心得体会
2016/01/20 职场文书
品德与社会教学反思
2016/02/24 职场文书