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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery实现二级导航菜单的示例
Sep 30 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php文件操作小结(删除指定文件/获取文件夹下的文件名/读取文件夹下图片名)
2016/05/09 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
jquery图片倾斜层叠切换特效代码分享
2015/08/27 Javascript
第七章之菜单按钮图标组件
2016/04/25 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
深入理解Javascript中的观察者模式
2017/02/20 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
python处理html转义字符的方法详解
2016/07/01 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
python实现批量修改图片格式和尺寸
2018/06/07 Python
python 多线程重启方法
2019/02/18 Python
Python 占位符的使用方法详解
2019/07/10 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
英国在线购买马术服装:EQUUS
2019/07/12 全球购物
高校教师岗位职责
2014/03/18 职场文书
毕业评语大全
2014/05/04 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
4s店活动策划方案
2014/08/25 职场文书
汉字听写大会观后感
2015/06/12 职场文书
python process模块的使用简介
2021/05/14 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android