jQuery实现上传图片前预览效果功能


Posted in jQuery onAugust 03, 2017

网上很多代码实现了上传图片这个功能,但不支持实时预览图片,下面实现了上传图片前预览效果功能,具体如下

效果如图:

jQuery实现上传图片前预览效果功能

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery上传图片之前可以预览效果</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<input id="file" ;="" onchange="c()" type="file"><br>
<img src="" id="show" width="200"><script>
function c () {
  var r= new FileReader();
  f=document.getElementById('file').files[0];
  
  r.readAsDataURL(f);
  r.onload=function (e) {
    document.getElementById('show').src=this.result;
  };
}</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
jQuery初级教程之网站品牌列表效果
Aug 02 #jQuery
基于jquery实现多选下拉列表
Aug 02 #jQuery
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 #jQuery
详解jquery选择器的原理
Aug 01 #jQuery
jQuery上传插件webupload使用方法
Aug 01 #jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 #jQuery
You might like
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
jquery ajax 登录验证实现代码
2009/09/23 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
原生js jquery ajax请求以及jsonp的调用方法
2017/08/04 jQuery
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
python求crc32值的方法
2014/10/05 Python
Python利用带权重随机数解决抽奖和游戏爆装备问题
2016/06/16 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python实现的端口扫描功能示例
2018/04/08 Python
Python整数对象实现原理详解
2019/07/01 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
Python with语句用法原理详解
2020/07/03 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
英国最大的汽车交易网站:Auto Trader UK
2016/09/23 全球购物
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
班组长工作职责
2013/12/25 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
广播体操口号
2014/06/18 职场文书
无私奉献演讲稿
2014/09/04 职场文书
开会通知
2015/04/20 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
java设计模式--原型模式详解
2021/07/21 Java/Android