简单实现jQuery上传图片显示预览功能


Posted in jQuery onJune 29, 2020

本文实例为大家分享了jQuery上传图片显示预览的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
 <title>HTML5上传图片预览</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
 <style>
  .hide
  {
   display:none;
  }
 </style>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
 <input type="file" name="file0" id="file0" multiple="multiple" />
 <br><br><img src="" id="img0" width="120" class="hide">
</form>
<script>
 $("#file0").change(function(){
  var objUrl = getObjectURL(this.files[0]) ;
  console.log("objUrl = "+objUrl) ;
  if (objUrl) 
  {
   $("#img0").attr("src", objUrl);
   $("#img0").removeClass("hide");
  }
 }) ;
 //建立一??可存取到?file的url
 function getObjectURL(file) 
 {
  var url = null ;
  if (window.createObjectURL!=undefined) 
  { // basic
   url = window.createObjectURL(file) ;
  }
  else if (window.URL!=undefined) 
  {
   // mozilla(firefox)
   url = window.URL.createObjectURL(file) ;
  } 
  else if (window.webkitURL!=undefined) {
   // webkit or chrome
   url = window.webkitURL.createObjectURL(file) ;
  }
  return url ;
 }
</script>
</body>
</html>

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

jQuery 相关文章推荐
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jquery实现图片轮播器
May 23 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
关于jquery layui弹出层的使用方法
Apr 21 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 #jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
jQuery实现广告条滚动效果
Aug 22 #jQuery
基于jQuery的表单填充实例
Aug 22 #jQuery
使用jQuery实现简单的tab框实例
Aug 22 #jQuery
JQuery判断正整数整理小结
Aug 21 #jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 #jQuery
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php创建sprite
2014/02/11 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
详解JavaScript函数
2015/12/01 Javascript
深入分析Javascript事件代理
2016/01/30 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
JavaScript性能优化总结之加载与执行
2016/08/11 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
js动态引入的四种方法
2018/05/05 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
Python转换时间的图文方法
2019/07/01 Python
浅谈Keras参数 input_shape、input_dim和input_length用法
2020/06/29 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
No7 Beauty美国官网:英国国民护肤品牌
2019/10/31 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
入党自我鉴定范文
2013/10/04 职场文书
校班主任推荐信范文
2013/12/03 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
tomcat正常启动但网页却无法访问的几种解决方法
2022/05/06 Servers