jQuery实现上传图片前预览效果功能


Posted in jQuery onAugust 03, 2017

网上很多代码实现了上传图片这个功能,但不支持实时预览图片,下面实现了上传图片前预览效果功能,具体如下

效果如图:

jQuery实现上传图片前预览效果功能

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery上传图片之前可以预览效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<input id="file" ;="" onchange="c()" type="file"><br>
<img src="" id="show" width="200"><script>
function c () {
  var r= new FileReader();
  f=document.getElementById('file').files[0];
  
  r.readAsDataURL(f);
  r.onload=function (e) {
    document.getElementById('show').src=this.result;
  };
}</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jquery 时间戳转日期过程详解
Oct 12 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解jquery选择器的原理
Aug 01 #jQuery
jQuery上传插件webupload使用方法
Aug 01 #jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
体育彩票排列三组选三算法分享
2014/03/07 PHP
php实现面包屑导航例子分享
2015/12/19 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP实现图片压缩
2020/09/09 PHP
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
儿童学习python的一些小技巧
2018/05/27 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
pytorch 可视化feature map的示例代码
2019/08/20 Python
Python多线程多进程实例对比解析
2020/03/12 Python
Python @property及getter setter原理详解
2020/03/31 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
实习单位评语
2014/04/26 职场文书
中学生运动会口号
2014/06/07 职场文书
死亡证明书样本说明
2014/10/18 职场文书
师德师风个人整改措施
2014/10/27 职场文书
争先创优个人总结
2015/03/04 职场文书
公司员工培训管理制度
2015/08/04 职场文书
python如何正确使用yield
2021/05/21 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python