简单实现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实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery导航条固定定位效果实例代码
May 26 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 jQuery
详解jQuery中的easyui
Sep 02 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现倒计时功能完整示例
Jun 01 jQuery
jquery插件实现轮播图效果
Oct 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
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
PHP 命令行参数详解及应用
2011/05/18 PHP
分享PHP header函数使用教程
2013/09/05 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
JavaScript操作 url 中 search 部分方法函数
2016/06/15 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
angular2+nodejs实现图片上传功能
2017/03/27 NodeJs
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
vue使用swiper实现中间大两边小的轮播图效果
2019/11/24 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
详解JavaScript中new操作符的解析和实现
2020/09/04 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
PyCharm最新激活码PyCharm2020.2.3有效
2020/11/18 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
高中生职业规划范文
2014/03/09 职场文书
标准单位租车协议书
2014/09/23 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
python实现的web监控系统
2021/04/27 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
MySQL sql模式设置引起的问题
2022/05/15 MySQL
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android