JS实现图片预览的两种方式
考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源。
那么要实现预览有两种方式:一种是用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实现图片预览的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
angularjs点击图片放大实现上传图片预览
本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下 承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span
-
手机图片预览插件photoswipe.js使用总结
手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 资源包:photoswipe-3.0.5 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分android手机上,滑动一次的时候,会跳转2张图片 (正常情况下,滑动一次,跳转1张图片) 通常使用方法如下: 在html的head标签中依次加载资源包中如下文件: <script type="text/javascript" src="
-
js本地图片预览实现代码
本文实例为大家分享了js本地图片预览实例,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="divPreview"> <img id="imgHeadPhoto" src="noperson.jpg" style="wid
-
JS上传图片预览插件制作(兼容到IE6)
一.实现图片预览的一些方法. 了解了一下,其实方法都是大同小异的.大概有以下几种方式: ①订阅input[type=file]元素的onchange事件. 一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上. 缺点:工作量大,有些上传并不是用户最终需要上传的图片,但是这种方式会把上传过程中选择过的图片都保存至服务器端,会造成资源浪费,而且服务器端清理临时的那些预览图片也需要一定的工作量. ②利用HTML5的新特性FileReader. 这个对象提供了
-
JS HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
-
js实现纯前端的图片预览
图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 一.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取Blob
-
JS实现的图片预览插件与用法示例【不上传图片】
本文实例讲述了JS实现不需要上传的图片预览插件与用法.分享给大家供大家参考,具体如下: 小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns
-
JS实现图片预览的两种方式
考虑到用户体验, 网页的图片上传数据库前,先预览是很有必要的一个步骤,第一可以给用户带来安全感,第二防止图片文件有问题而提交到数据库,占用存储资源. 那么要实现预览有两种方式:一种是用window.URL.createObjectURl方法对选择的图片数据(可以勉强理解为input的value)生成一个blob对象路径,第二种是用获取 FileReader读取器. 那么无论那种方法,首先都得得到文件数据,获得文件数据是从files集合中获取. 方式一: 代码如下: <input type=fil
-
如何利用原生JS实现图片预览加上传(前后端交互)
目录 前言 效果大致如下 前端代码 后端代码 总结 前言 最近在写vue项目的时候发现了个Vant的一个upload的图片上传的组件,就好奇了一下下,于是萌生了一个自己手写一个图片上传的组件的想法,您猜怎么着,还真给我实现了,那今天就和大家分享一下,大家有兴趣的可以了解一下啦,写进项目中可能会是个加分点哦!! 我们知道文件上传是需要前后端交互的,所以我这边给出前后端代码. 文件上传大致分为以下几个步骤 前端文件选择上传的文件类型 拿到文件信息 将选择的文件(视频或图片)在前端页面预览出来 将文件
-
如何通过js实现图片预览功能【附实例代码】
实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
-
JS实现Tab栏切换的两种方式案例详解
面向过程的写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
-
viewer.js实现图片预览功能
viewer.js是实现图片预览的插件库,要在项目中使用它里面的功能,首先要引入两个文件: 1.css文件:viewer.css 2.js文件:viewer.js 可以在这里下载 下载后,在html中引入 <link rel="stylesheet" type="text/css" href="./viewer.css" rel="external nofollow" /> <script src="
-
Java实现PDF在线预览功能(四种方式)
目录 Java实现PDF在线预览 Java快捷实现PDF在线预览 Java实现PDF在线预览 @RequestMapping("/preview1") public void er(HttpServletResponse response){ File file = new File("G:\\桌面\\Thymeleaf3.0中文翻译文档@www.java1234.com.pdf"); if (file.exists()){ byte[] data = null;
-
js实现轮播图的两种方式(构造函数、面向对象)
本文实例为大家分享了js实现轮播图的具体代码,供大家参考,具体内容如下 1.构造函数 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type='text/css'> *{ margin:0; padding:0;} #wrap{ width:500px; height:360px; margin:1
-
js清空表单数据的两种方式(遍历+reset)
方法1:遍历页面元素 /* 清空FORM表单内容 id:表单ID*/ function ClearForm(id) { var objId = document.getElementById(id); if (objId == undefined) { return; } for (var i = 0; i < objId.elements.length; i++) { if (objId.elements[i].type == "text") { objId.elements[
-
js前端实现多图图片上传预览的两个方法(推荐)
一.将图片转成icon码的实现方式 html代码: <div class="yanzRight"> <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this,5)" type="file"/> <span class=&qu
随机推荐
- 解决json日期格式问题的3种方法
- 千条新春祝福拜年短信、春联大收集
- 转载一个别人收藏的精典网站Ruby,HIBERNATE相关
- Python的内存泄漏及gc模块的使用分析
- 基于vue+ bootstrap实现图片上传图片展示功能
- 使用批处理按要求批量删除文件夹方法汇总
- 30分钟入门Java8之lambda表达式学习
- 在Python中使用M2Crypto模块实现AES加密的教程
- IE及IE6浏览器中判断JS文件加载成功失败的方法
- PHP自带方法验证邮箱是否存在
- MySQL 自动备份与数据库被破坏后的恢复方法第1/2页
- JS刷新框架外页面七种实现代码
- vbs wmi获取电脑硬件信息实例
- C语言 奇偶排序算法详解及实例代码
- SQL SERVER数据操作类代码
- Linux系统管理常用命令及参数说明中文版
- 利用Android中BitmapShader制作自带边框的圆形头像
- jQuery绑定自定义事件的魔法升级版
- 初步认识JavaScript函数库jQuery
- 详解微信小程序设置底部导航栏目方法