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.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
jquery操作select常见方法大全【7种情况】
May 28 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现简单拖拽效果
Jul 20 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
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php生成静态页面的简单示例
2014/04/17 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
python strip()函数 介绍
2013/05/24 Python
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
flask的orm框架SQLAlchemy查询实现解析
2019/12/12 Python
Python基于当前时间批量创建文件
2020/05/07 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
Java的接口和C++的虚类的相同和不同处
2014/03/27 面试题
电脑教师的教学自我评价
2013/11/26 职场文书
森林防火工作方案
2014/02/14 职场文书
技术转让协议书
2016/03/19 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书