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 EasyUI $.Parser
Jun 02 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
jQuery实现上下滚动公告栏详细代码
Nov 21 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
利用PHP获取网站访客的所在地位置
2017/01/18 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP设计模式之简单工厂和工厂模式实例分析
2019/03/25 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
javascript编程起步(第二课)
2007/01/10 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
Angular6项目打包优化的实现方法
2019/12/15 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
Python3实现连接SQLite数据库的方法
2014/08/23 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上
2013/07/06 面试题
学生手册家长评语
2014/02/10 职场文书
营销学习心得体会
2014/09/12 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书