jQuery实现的上传图片本地预览效果简单示例


Posted in jQuery onMarch 29, 2018

本文实例讲述了jQuery实现的上传图片本地预览效果。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3water.com jquery上传图片本地预览效果</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<input id="upload" type="file">
<img id="preview" src="">
<script type="text/javascript">
$('#upload').change(function(){
  // 获取FileList的第一个元素
  alert(document.getElementById('upload').files[0]);
  var f = document.getElementById('upload').files[0];
  src = window.URL.createObjectURL(f);
  document.getElementById('preview').src = src
})
</script>
</body>
</html>

运行效果:

jQuery实现的上传图片本地预览效果简单示例

jQuery实现的上传图片本地预览效果简单示例

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

jQuery 相关文章推荐
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
jQuery上传插件webupload使用方法
Aug 01 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 #jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 #jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 #jQuery
You might like
thinkphp控制器调度使用示例
2014/02/24 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
分享精心挑选的23款美轮美奂的jQuery 图片特效插件
2012/08/14 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
微信小程序tab左右滑动切换功能的实现代码
2021/02/08 Javascript
[04:49]期待西雅图之战 2016国际邀请赛中国区预选赛WINGS战队赛后采访
2016/06/29 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python 中的 else详解
2016/04/23 Python
深入浅析python继承问题
2016/05/29 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
简述 Python 的类和对象
2020/08/21 Python
基于html5 DeviceOrientation 实现微信摇一摇功能
2015/09/25 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
PyQt QMainWindow的使用示例
2021/03/24 Python
医药营销个人求职信范文
2014/02/07 职场文书
地理科学专业自荐信
2014/09/01 职场文书
公司内部升职自荐信
2015/03/27 职场文书
公司开业主持词
2015/07/02 职场文书
党员反四风学习心得体会
2016/01/22 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python
详细了解MVC+proxy
2021/07/09 Java/Android