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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
使用jQuery实现购物车结算功能
Aug 15 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery带控制按钮轮播图插件
Jul 31 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快速统计某个数据库中每张表的数据量
2012/09/04 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
vue debug 二种方法
2018/09/16 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
python获取网页状态码示例
2014/03/30 Python
跟老齐学Python之重回函数
2014/10/10 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
python多进程控制学习小结
2018/10/31 Python
在python里从协程返回一个值的示例
2019/02/19 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
国贸专业求职信
2014/06/28 职场文书
小型婚礼主持词
2015/06/30 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js