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实现图片预览的几种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
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. 这个对象提供了
-
angularjs点击图片放大实现上传图片预览
本文实例为大家分享了angularjs点击图片放大预览的具体代码,供大家参考,具体内容如下 承接上一篇文章 /*图片点击放大再点击还原*/ angular.module('routerModule').directive('enlargePic',function(){//<span style="font-family: Arial, Helvetica, sans-serif;">enlargePic指令名称,写在需要用到的地方img中即可实现放大图片</span
-
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实现纯前端的图片预览
图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 一.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取Blob
-
手机图片预览插件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 HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
-
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
随机推荐
- Swift 3.0 enum 的灵活使用介绍
- 重定向符(、)的使用
- 使用spring实现邮件的发送实例(含测试,源码,注释)
- perl实现blog备份的脚本代码
- Python break语句详解
- Python搭建HTTP服务器和FTP服务器
- C#中的Equals、RefrenceEquals和==的区别与联系
- JavaScript编程开发中的五个实用小技巧
- PHP URL路由类实例
- PHP得到某段时间区间的时间戳 php定时任务
- Ubuntu中搭建Nginx、PHP环境最简单的方法
- linux正则表达式awk详解
- python定时器使用示例分享
- Go语言中接口组合的实现方法
- php浏览历史记录的方法
- JQuery解析XML数据的几个简单实例
- js跟随滚动条滚动浮动代码
- php实现网站顶踩功能的完整前端代码
- jQuery实现每隔几条元素增加1条线的方法
- Android studio 出现 Unsupported major.minor version 52.0解决办法