轻松实现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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
May 25 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
three.js如何实现3D动态文字效果
Mar 03 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
You might like
PHP 字符串操作入门教程
2006/12/06 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
php根据isbn书号查询amazon网站上的图书信息的示例
2014/02/13 PHP
php防止sql注入的方法详解
2017/02/20 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
js获取ip和地区
2017/03/10 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
python简单实现9宫格图片实例
2020/09/03 Python
python简单实现插入排序实例代码
2020/12/16 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
什么是聚集索引和非聚集索引
2012/01/17 面试题
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
中国梦演讲稿范文
2014/08/28 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
物业工程部岗位职责
2015/02/11 职场文书
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript