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 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
简单实现jQuery弹幕效果
May 06 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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
消息持续发送的完整例子
2006/10/09 PHP
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php使用google地图应用实例
2014/12/31 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python完成FizzBuzzWhizz问题(拉勾网面试题)示例
2014/05/05 Python
python通过smpt发送邮件的方法
2015/04/30 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
wxPython实现画图板
2020/08/27 Python
python实现简单坦克大战
2020/03/27 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
学生个人自我鉴定
2014/03/26 职场文书
3分钟演讲稿
2014/04/30 职场文书
赢在中国观后感
2015/06/02 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript