首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

轻松实现js图片预览功能

Posted in Javascript onJanuary 18, 2016

本文实例讲述了js实现图片预览的方法，自己以前写的一个，代码比较简洁，分享给大家供大家参考。具体如下：

一、效果预览

效果图：

轻松实现js图片预览功能

二、实现代码：

<html>
<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>

希望本文所述对大家的javascript程序设计有所帮助。

轻松实现js图片预览功能

- Author -

daliu_it

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
详解js中==与===的区别
Jan 08 Javascript
基于Bootstrap的Java开发问题汇总（Spring MVC）
Jan 15 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
使用Fullpage插件快速开发整屏翻页的页面
Sep 13 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
js实现简单放大镜效果
Mar 07 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 #Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 #Javascript
node.js+express制作网页计算器
Jan 17 #Javascript
JQuery实现网页右侧随动广告特效
Jan 17 #Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
for(1) 监听(2) watch(1) re模块(2) while(1) okenizer(1) sched(1) 无限迭代(1) 分词器(1) 事件调度器(1)
You might like
php垃圾代码优化操作代码
2010/08/05 PHP
php中strtotime函数用法详解
2014/11/15 PHP
php图片的二进制转换实现方法
2014/12/15 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
javascript getElementsByName()的用法说明
2009/07/31 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
Vue实现商品分类菜单数量提示功能
2019/07/26 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Python中编写ORM框架的入门指引
2015/04/29 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python安装selenium包详细过程
2019/07/23 Python
python写程序统计词频的方法
2019/07/29 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python——全排列数的生成方式
2020/02/26 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
零基础小白多久能学会python
2020/06/22 Python
碧欧泉美国官网：Biotherm美国
2016/08/31 全球购物
GIVENCHY纪梵希官方旗舰店：高定彩妆与贵族护肤品
2018/04/16 全球购物
Linux如何命名文件--使用文件名时应注意
2012/01/22 面试题
环卫工人先进事迹材料
2014/06/02 职场文书
秋冬农业生产标语
2014/10/09 职场文书
2019个人年度目标制定攻略！
2019/07/12 职场文书
浅谈Python中对象是如何被调用的
2022/04/06 Python