纯JS实现本地图片预览的方法


Posted in Javascript onJuly 31, 2015

本文实例讲述了纯JS实现本地图片预览的方法。分享给大家供大家参考。具体如下:

刚突然看到,网上已经有很多类似的代码,但没找到一个合适的。就拿自己以前写的写了一个。代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容。本机浏览器基本都支持(IE,FF,Chrome)

index.html如下:

<html>
<head>
<title>Test</title>
<script type="text/javascript" src="js/z.js"></script>
</head>
<body>
<center>
  <img id="img" src="" /><p />
  <input type="file" id="file" />
</center>
<script>
  z.plimg(z.$('file'),z.$('img'),function(file,img,url){
    alert(url);
  });
</script>
</body>
</html>

z.js点击此处本站下载。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue项目中,main.js,App.vue,index.html的调用方法
Sep 20 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
javascript动画算法实例分析
Jul 31 #Javascript
jquery实现手机号码选号的方法
Jul 31 #Javascript
javascript文本模板用法实例
Jul 31 #Javascript
Javascript实现网络监测的方法
Jul 31 #Javascript
jquery模拟alert的弹窗插件
Jul 31 #Javascript
JSON字符串转JSON对象
Jul 31 #Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 #Javascript
You might like
实例讲解php实现多线程
2019/01/27 PHP
Javascript 构造函数 实例分析
2008/11/26 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
jQuery UI的Dialog无法提交问题的解决方法
2011/01/11 Javascript
BootStrap中Tab页签切换实例代码
2016/05/30 Javascript
JavaScript暂停和继续定时器的实现方法
2016/07/18 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
AngularJS中$apply方法和$watch方法用法总结
2016/12/13 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
[49:42]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第一局
2016/03/04 DOTA
python检测lvs real server状态
2014/01/22 Python
Python max内置函数详细介绍
2016/11/17 Python
Python中Numpy mat的使用详解
2019/05/24 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
Xadmin+rules实现多选行权限方式(级联效果)
2020/04/07 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
解决Python3.8运行tornado项目报NotImplementedError错误
2020/09/02 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
英国大码女性时装零售商:Evans
2018/08/29 全球购物
房地产开盘策划方案
2014/02/10 职场文书
孩子教育的心得体会
2014/09/01 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
五一劳动节活动总结
2015/02/09 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
React中的Context应用场景分析
2021/06/11 Javascript