编程 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 相关文章推荐

setAttribute 与 class冲突解决

Feb 17 Javascript

JS 自定义带默认值的函数

Jul 21 Javascript

js 自定义个性下拉选择框示例

Aug 20 Javascript

采用自执行的匿名函数解决for循环使用闭包的问题

Sep 11 Javascript

JavaScript中常用的六种互动方法示例

Mar 13 Javascript

解决jquery实现的radio重新选中的问题

Jul 03 Javascript

jQuery实现表格文本框淡入更改值后淡出效果

Sep 27 Javascript

less简单入门(CSS 预处理语言)

Mar 08 Javascript

详解webpack解惑：require的五种用法

Jun 09 Javascript

微信小程序图片轮播组件gallery slider使用方法详解

Jan 31 Javascript

JavaScript中click和onclick本质区别与用法分析

Jun 07 Javascript

vue实现多个echarts根据屏幕大小变化而变化实例

Jul 19 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实现的click captcha点击验证码类实例

2014/09/23 PHP

让ThinkPHP支持大小写url地址访问的方法

2014/10/31 PHP

关于flash遮盖div浮动层的解决方法

2010/07/17 Javascript

JavaScript中九种常用排序算法

2014/09/02 Javascript

详解javascript实现瀑布流列式布局

2016/01/29 Javascript

Javascript 5种方法实现过滤删除前后所有空格

2016/06/22 Javascript

微信小程序 modal详解及实例代码

2016/11/09 Javascript

JavaScript闭包和范围实例详解

2016/12/19 Javascript

angular和BootStrap3实现购物车功能

2017/01/25 Javascript

详解vue嵌套路由-params传递参数

2017/05/23 Javascript

node.js中express中间件body-parser的介绍与用法详解

2017/05/23 Javascript

javascript与PHP动态往类中添加方法对比

2018/03/21 Javascript

Vue页面骨架屏的实现方法

2018/05/22 Javascript

VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

2018/11/28 Javascript

java实现单链表增删改查的实例代码详解

2019/08/30 Javascript

详解Python的Django框架中inclusion_tag的使用

2015/07/21 Python

Python实现多并发访问网站功能示例

2017/06/19 Python

python好玩的项目—色情图片识别代码分享

2017/11/07 Python

基于wxPython的GUI实现输入对话框（1）

2019/02/27 Python

python3.7 sys模块的具体使用

2019/07/22 Python

python求前n个阶乘的和实例

2020/04/02 Python

python模拟哔哩哔哩滑块登入验证的实现

2020/04/24 Python

Django 解决model 反向引用中的related_name问题

2020/05/19 Python

python sleep和wait对比总结

2021/02/03 Python

PyCharm 光标变成黑块的解决方式

2021/02/06 Python

利用CSS3的transform做的动态时钟效果

2011/09/21 HTML / CSS

HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果

2016/04/26 HTML / CSS

英国的知名精品百货公司：House of Fraser（福来德）

2016/08/14 全球购物

德国咖啡批发商：Coffeefair

2019/08/26 全球购物

商务英语求职自荐信范文

2013/12/24 职场文书

QQ空间主人寄语大全

2014/04/12 职场文书

安全生产宣传标语

2014/06/06 职场文书

学习走群众路线心得体会

2014/11/05 职场文书

学校安全管理制度

2015/08/06 职场文书

css 中多种边框的实现小窍门

2021/04/07 HTML / CSS

关于React Native 无法链接模拟器的问题

2021/06/21 Javascript