脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery上传图片显示预览功能

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

 更新时间：2020年06月29日 17:08:40   作者：小白爱吃猪头肉  
这篇文章主要教大家如何简单实现jQuery上传图片显示预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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拖拽排序效果实现代码

    写了简单的跟随鼠标移动效果。这个拖拽排序的效果的区别在于： 运用了插入insertBefore 和 insertAfter 的方法
    2011-09-09
  • JSON JQUERY模板实现说明

    JSON JQUERY模板实现说明

    用JSON从服务器端返回数据已是大家公认的标准,因为它短小精悍,使用方便.
    2010-07-07
  • jQuery基础的工厂函数以及定时器的经典实例分析

    jQuery基础的工厂函数以及定时器的经典实例分析

    下面小编就为大家带来一篇jQuery基础的工厂函数以及定时器的经典实例分析。小编觉得挺不错的，现在
    2016-05-05
  • jQuery EasyUI之DataGrid使用实例详解

    jQuery EasyUI之DataGrid使用实例详解

    这篇文章主要介绍了jQuery EasyUI之DataGrid使用实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery实现类似标签风格的导航菜单效果代码

    jQuery实现类似标签风格的导航菜单效果代码

    这篇文章主要介绍了jQuery实现类似标签风格的导航菜单效果代码,涉及jquery鼠标事件操作页面元素的遍历与样式动态修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • jQuery操作cookie的示例代码

    jQuery操作cookie的示例代码

    这篇文章主要介绍了jQuery操作cookie的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • jquery trigger实现联动的方法

    jquery trigger实现联动的方法

    这篇文章主要介绍了jquery trigger实现联动的方法,结合实例形式分析了trigger的具体使用技巧,需要的朋友可以参考下
    2016-02-02
  • jQuery动态添加与删除tr行实例代码

    jQuery动态添加与删除tr行实例代码

    最近由于项目的需要，需要动态的添加和删除table中的tr，感觉用JS可以实现，但是在网上找了一下，单纯的自己写JS，感觉太麻烦，而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法，有需要的朋友们可以参考借鉴。
    2016-10-10
  • jquery+php后台实现省市区联动功能示例

    jquery+php后台实现省市区联动功能示例

    这篇文章主要介绍了jquery+php后台实现省市区联动功能,涉及jQuery事件响应及页面元素属性动态变换,以及ajax后台动态交互相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • jquery禁止输入数字以外的字符的示例(纯数字验证码)

    jquery禁止输入数字以外的字符的示例(纯数字验证码)

    这篇文章主要介绍了jquery禁止输入数字以外的字符的示例(纯数字验证码),需要的朋友可以参考下
    2014-04-04

最新评论