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实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 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
收音机指标测试方法及仪器
2021/03/01 无线电
PHP5 安装方法
2006/10/09 PHP
php之Memcache学习笔记
2013/06/17 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
jQuery 拖动层(在可视区域范围内)
2012/05/24 Javascript
一个简单的jquery的多选下拉框(自写)
2014/05/05 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
2014/10/20 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
原生javascript实现读写CSS样式的方法详解
2017/02/20 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
2019/04/25 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
基于循环神经网络(RNN)的古诗生成器
2018/03/26 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Pygame的程序开始示例代码
2020/05/07 Python
PyTorch-GPU加速实例
2020/06/23 Python
python3 re返回形式总结
2020/11/20 Python
戴尔美国官网:Dell
2016/08/31 全球购物
青年安全生产示范岗事迹材料
2014/05/04 职场文书
学校课外活动总结
2014/05/08 职场文书
介绍信的写法
2015/01/31 职场文书
如何写新闻稿
2015/07/18 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2016特色励志班级口号
2015/12/24 职场文书