简单实现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 Plupload上传插件的使用
Apr 19 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
jQuery zTree插件快速实现目录树
Aug 16 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
基于mysql的bbs设计(二)
2006/10/09 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
JavaScript实现给定时间相加天数的方法
2016/01/25 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
Python生成随机密码
2015/03/10 Python
python递归计算N!的方法
2015/05/05 Python
python 容器总结整理
2017/04/04 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
Python Flask基础教程示例代码
2018/02/07 Python
python pandas修改列属性的方法详解
2018/06/09 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Keras loss函数剖析
2020/07/06 Python
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
英国奢侈品网站:MatchesFashion
2016/12/16 全球购物
物业经理求职自我评价
2013/09/22 职场文书
加拿大留学自荐信
2014/01/28 职场文书
经理任命书模板
2014/06/06 职场文书
邓小平理论心得体会
2014/09/09 职场文书
事业单位聘任报告
2015/03/02 职场文书
Python实现单例模式的5种方法
2021/06/15 Python