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

让你的博文自动带上缩址的实现代码，方便发到微博客上

Dec 28 Javascript

详解JavaScript语法对{}处理的坑爹之处

Jun 05 Javascript

Firefox中使用outerHTML的2种解决方法

Jun 07 Javascript

详解Vue2.0之去掉组件click事件的native修饰

Apr 20 Javascript

Angular实现较为复杂的表格过滤，删除功能示例

Dec 23 Javascript

如何阻止小程序遮罩层下方图层滚动

Sep 05 Javascript

layer.open 获取不到表单信息的解决方法

Sep 26 Javascript

Vue 中使用 typescript的方法详解

Feb 17 Javascript

vue css 引入asstes中的图片无法显示的四种解决方法

Mar 16 Javascript

简单了解JavaScript作用域

Jul 31 Javascript

vue 实现图片懒加载功能

Dec 31 Vue.js

vue判断按钮是否可以点击

Apr 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

PHP输出控制功能在简繁体转换中的应用

2006/10/09 PHP

114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法

2012/01/12 PHP

PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】

2018/05/21 PHP

js获取多个tagname的节点数组

2013/09/22 Javascript

瀑布流布局代码一例

2014/04/11 Javascript

js实现具有高亮显示效果的多级菜单代码

2015/09/01 Javascript

理解JS事件循环

2016/01/07 Javascript

基于jQuery实现以手风琴方式展开和折叠导航菜单

2016/01/28 Javascript

Avalon中文长字符截取、关键字符隐藏、自定义过滤器

2016/05/18 Javascript

JavaScript toUpperCase()方法使用详解

2016/08/26 Javascript

利用JS提交表单的几种方法和验证(必看篇)

2016/09/17 Javascript

JavaScript利用Date实现简单的倒计时实例

2017/01/12 Javascript

vue v-on监听事件详解

2017/05/17 Javascript

nodejs实现套接字服务功能详解

2018/06/21 NodeJs

详解简单易懂的 ES6 Iterators 指南和示例

2019/09/24 Javascript

vue设置导航栏、侧边栏为公共页面的例子

2019/11/01 Javascript

[14:24]Optic Gaming vs PSG LGD BO3

2018/06/07 DOTA

[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5

2018/06/06 DOTA

python实现可逆简单的加密算法

2019/03/22 Python

pytorch 在sequential中使用view来reshape的例子

2019/08/20 Python

python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)

2020/01/08 Python

Python实现点云投影到平面显示

2020/01/18 Python

浅谈matplotlib.pyplot与axes的关系

2020/03/06 Python

Python getsizeof()和getsize()区分详解

2020/11/20 Python

HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制，单行文字、多行文字等

2018/11/30 HTML / CSS

浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同

2020/06/04 HTML / CSS

行政助理求职自荐信

2013/10/26 职场文书

销售员个人求职的自我评价

2014/02/10 职场文书

大学生职业规划书的范本

2014/02/18 职场文书

总经理任命书范本

2014/06/05 职场文书

应届大专生求职信

2014/06/26 职场文书

装配出错检讨书

2014/09/23 职场文书

《我是什么》教学反思

2016/02/16 职场文书

Nginx中break与last的区别详析

2021/03/31 Servers

nginx搭建图片服务器的过程详解(root和alias的区别)

2021/03/31 Servers

Redis入门教程详解

2021/08/30 Redis