编程 Javascript

如何通过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实现图片预览功能【附实例代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

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

Javascript 相关文章推荐

EXTJS记事本当CompositeField遇上RowEditor

Jul 31 Javascript

javascript检测浏览器flash版本的实现代码

Dec 06 Javascript

js数值和和字符串进行转换时可以对不同进制进行操作

Mar 05 Javascript

javascript中replace( )方法的使用

Apr 24 Javascript

javascript封装简单实现方法

Aug 11 Javascript

关于js原型的面试题讲解

Sep 25 Javascript

AngularJs表单校验功能实例代码

Feb 09 Javascript

Vuejs实现购物车功能

Nov 05 Javascript

express默认日志组件morgan的方法

Apr 05 Javascript

vue-router结合vuex实现用户权限控制功能

Nov 14 Javascript

浅谈Vue static 静态资源路径和 style问题

Nov 07 Javascript

记录一次websocket封装的过程

Nov 23 Javascript

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

PHP 5.5 创建和验证哈希最简单的方法详解

2013/11/07 PHP

php中namespace及use用法分析

2016/12/06 PHP

PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】

2018/06/16 PHP

JS 容错处理代码, 屏蔽错误信息

2021/03/09 Javascript

jquery 图片截取工具jquery.imagecropper.js

2010/04/09 Javascript

让JavaScript拥有类似Lambda表达式编程能力的方法

2010/09/12 Javascript

jQuery事件绑定.on()简要概述及应用

2013/02/07 Javascript

Bootstrap基础学习

2015/06/16 Javascript

javascript实现倒计时（精确到秒）

2015/06/26 Javascript

js获取对象、数组的实际长度,元素实际个数的实现代码

2016/06/08 Javascript

js 弹出对话框(遮罩)透明,可拖动的简单实例

2016/07/11 Javascript

微信小程序实例应用（记账）详解

2016/09/28 Javascript

JS正则子匹配实例分析

2016/12/22 Javascript

微信小程序微信支付接入开发实例详解

2017/04/12 Javascript

JS实现的简单表单验证功能示例

2017/10/13 Javascript

vue点击input弹出带搜索键盘并监听该元素的方法

2018/08/25 Javascript

vue实现下拉加载其实没那么复杂

2019/08/13 Javascript

Vue父子之间值传递的实例教程

2020/07/02 Javascript

总结Python编程中三条常用的技巧

2015/05/11 Python

Python3中的2to3转换工具使用示例

2015/06/12 Python

利用Python将每日一句定时推送至微信的实现方法

2018/08/13 Python

Python Selenium 之关闭窗口close与quit的方法

2019/02/13 Python

django使用xadmin的全局配置详解

2019/11/15 Python

python的time模块和datetime模块实例解析

2019/11/29 Python

Python基于WordCloud制作词云图

2019/11/29 Python

Python爬虫JSON及JSONPath运行原理详解

2020/06/04 Python

Python 开发工具通过 agent 代理使用的方法

2020/09/27 Python

基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例

2017/07/31 HTML / CSS

大学毕业生文采飞扬的自我鉴定

2013/12/03 职场文书

医药代表个人求职信范本

2013/12/19 职场文书

文明礼貌演讲稿

2014/05/12 职场文书

党员教师四风问题对照检查材料

2014/09/26 职场文书

业务内勤岗位职责

2015/04/13 职场文书

2016学习雷锋精神活动倡议书

2015/04/27 职场文书

深入解读Java三大集合之map list set的用法

2021/11/11 Java/Android

关于JavaScript 中 if包含逗号表达式

2021/11/27 Javascript