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和ajax代替iframe的方法(详解)
Apr 12 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
详解php协程知识点
2018/09/21 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
2017/05/12 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
关于vue.extend和vue.component的区别浅析
2017/08/16 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
Vue 实现树形视图数据功能
2018/05/07 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
python通过线程实现定时器timer的方法
2015/03/16 Python
Python 实现 贪吃蛇大作战 代码分享
2016/09/07 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python实现AES加密和解密
2019/03/27 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python input函数使用实例解析
2019/11/22 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
面向对象编程的优势是什么
2015/12/17 面试题
机关党建工作汇报材料
2014/08/20 职场文书
个人工作表现评价材料
2014/09/21 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
教师个人考察材料
2014/12/16 职场文书
小学生学习保证书
2015/02/26 职场文书
公安机关起诉意见书
2015/05/20 职场文书
《日月潭》教学反思
2016/02/20 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书