如何通过js实现图片预览功能【附实例代码】


Posted in Javascript onMarch 30, 2016

实现代码:

<!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="Content-Type" content="text/html; charset=gb2312" />
<title>js图片预览功能</title>
<script language=javascript>
function previewFile() {
 var preview = document.querySelector('img');
 var file  = document.querySelector('input[type=file]').files[0];
 var reader = new FileReader();
 reader.onloadend = function () {
  preview.src = reader.result;
 }
 if (file) {
  reader.readAsDataURL(file);
 } else {
  preview.src = "";
 }
}
</script>
</head>
<body>
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" width="300" alt="Image preview..."/>
</body>
</html>

效果预览

效果图:

如何通过js实现图片预览功能【附实例代码】

以上这篇如何通过js实现图片预览功能【附实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
jquery绑定事件不生效的解决方法
Feb 11 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
Javascript基础教程之JavaScript语法
Jan 18 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Node.js 进程平滑离场剖析小结
Jan 24 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 #Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 #Javascript
jquery实现一个简单的表单验证实例
Mar 30 #Javascript
js实现密码强度检测【附示例】
Mar 30 #Javascript
原生javascript实现的一个简单动画效果
Mar 30 #Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 #Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 #Javascript
You might like
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
php中使用GD库做验证码
2016/03/31 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
JavaScript日历实现代码
2010/09/12 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
jquery操作select大全
2014/04/25 Javascript
删除Javascript Object中间的key
2014/11/18 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
深入理解python函数递归和生成器
2016/06/06 Python
python使用turtle库绘制树
2018/06/25 Python
Python判断telnet通不通的实例
2019/01/26 Python
python判断自身是否正在运行的方法
2019/08/08 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
Python ckeditor富文本编辑器代码实例解析
2020/06/22 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
世界经理人咨询有限公司面试
2014/09/23 面试题
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle