首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
一个多次搜索+多次传值的解决方案
Jan 20 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
JQuery实现倒计时按钮具体方法
Nov 14 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
jquery插件bootstrapValidator表单验证详解
Dec 15 Javascript
微信小程序 页面之间传参实例详解
Jan 13 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
vue二级菜单导航点击选中事件的方法
Sep 12 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 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
SWL(1) 中波(3) ad hoc(1) 调幅(1) 电磁辐射(1) LW(1) GWEN(1) FM(4) SW(1) 调频(4)
You might like
PHP Memcached应用实现代码
2010/02/08 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
php远程请求CURL实例教程（爬虫、保存登录状态）
2020/12/10 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
javascript深入理解js闭包
2010/07/03 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
2014/01/10 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
Vue keep-alive实践总结（推荐）
2017/08/31 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
Vue中使用JsonView来展示Json树的实例代码
2020/11/16 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
python mysqldb连接数据库
2009/03/16 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
华为旗下电子商务平台：华为商城
2016/08/06 全球购物
英国在线药房和在线药剂师：Chemist 4 U
2020/01/05 全球购物
what is the difference between ext2 and ext3
2013/11/03 面试题
新教师个人工作总结
2015/02/06 职场文书