简单实现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 相关文章推荐
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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
重量级动漫纷纷停播!唯独OVERLORD第四季正在英魂之刃继续更新
2020/05/06 日漫
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
this和执行上下文实现代码
2010/07/01 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
jQuery+Ajax实现限制查询间隔的方法
2016/06/07 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
完美实现js选项卡切换效果(一)
2017/03/08 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
python计算一个序列的平均值的方法
2015/07/11 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
python内打印变量之%和f的实例
2020/02/19 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
python中字典增加和删除使用方法
2020/09/30 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
活动总结怎么写
2014/04/28 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015年组织部工作总结
2015/04/03 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书
药房管理制度范本
2015/08/06 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
深入理解Pytorch微调torchvision模型
2021/11/11 Python