纯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 相关文章推荐
传智播客学习之java 反射
Nov 22 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
JavaScript实现翻页功能(附效果图)
Feb 16 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
vue 注册组件的使用详解
May 05 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
详解element-ui中表单验证的三种方式
Sep 18 Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
react 生命周期实例分析
May 18 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 常用算法和时间复杂度
2013/07/01 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
PHP 设计模式系列之 specification规格模式
2016/01/10 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
php常用字符串查找函数strstr()与strpos()实例分析
2019/06/21 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
JsRender for object语法简介
2014/10/31 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
vue组件学习教程
2017/09/09 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python用threading实现多线程详解
2017/02/03 Python
python梯度下降法的简单示例
2018/08/31 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
python如何写try语句
2020/07/14 Python
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
STAUD官方网站:洛杉矶独有的闲适风格
2019/04/11 全球购物
个人简历中的自我评价范例
2013/10/29 职场文书
年度考核自我鉴定
2014/03/19 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
初中家长意见
2015/06/03 职场文书
2015中学教学工作总结
2015/07/22 职场文书
小学生运动会广播
2015/08/19 职场文书