JS点击图片弹出文件选择框并覆盖原图功能的实现代码

简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能。

js代码:

<script type="text/javascript" src="jquery1.8.3.min.js"></script>
<script type="text/javascript">
 $(function() {
  //建立一個可存取到該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;
  }
  //获取点击的图片元素
  var cdimg = $('.fileImgs1').children('img');
  //获取上传图片的 input 标签元素
  var cdfile = $('.fileImgs1').children('input[type="file"]');
  //设置input 大小和图片一致
  cdfile.css({'width':cdimg.css('width'),'height':cdimg.css('height')});
  //input透明度为0,定位,优先级比图片高
  cdfile.css({'opacity':0,'position':'absolute','z-index':10});
  //判断input的图片文件改变则img的图片也替换为input选择的图片
  cdfile.change(function() {
    if (this.files && this.files[0]) {
      var objUrl = getObjectURL(this.files[0]);
      if (objUrl) {
        $(this).siblings('img').attr("src", objUrl);
      }
    }
  });
 })
</script> 

HTML调用代码:

<body>
<span style="white-space:pre"> </span><div class='fileImgs1'>
    <input type="file" name='img4'>
    <img src="getu1.png" style='width:145px;height:125px' alt="">
  </div>
</body> 

总结

以上所述是小编给大家介绍的JS点击图片弹出文件选择框并覆盖原图功能的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 让JavaScript的Alert弹出框失效的方法禁止弹出警告框

    本文将介绍让JavaScript的Alert弹出框失效的方法,也就是禁止让JS弹出警告框. 因为现在都提倡绿色上网环境,弹出框难免会影响你的心情,所以通过以下代码可将Js弹出框屏蔽掉. <script LANGUAGE="JavaScript"> <!-- window.alert = function(str){ return ; } alert("不能弹出警示框");//--> </script> 实现思路是对"al

  • angularjs创建弹出框实现拖动效果

    本文实例介绍了angularjs创建弹出框实现拖动效果的相关代码,项目中需要将angular-ui-bootstrap中用到的弹出框,使之可拖动,分享给大家供大家参考,具体内容如下 运行效果图: 由于源文件中没有实现,需要自己实现指令,以下即为该指令,亲测可以实现. .directive('draggable', ['$document', function($document) { return function(scope, element, attr) { var startX = 0,

  • javascript制作的网页侧边弹出框思路及实现代码

    到周末了,明天该总结一下了,感觉学到了些东西,又感觉没学多少东西,具体明天再分析吧,先来看看今天要分析的问题. 这样的图片相比大家都很熟悉: ------------ 今天我们就来分析制作一下,先来介绍下这种弹出框的特点: * 始终依附在页面边框上 * 不随页面的上升下降而改变位置 * 鼠标经过时,会弹出详细信息,离开时,恢复最初状态 这样我们就能大概想到几个可能会用到的功能:postion的绝对定位:鼠标经过离开的监听和方法:这些是肯定会用的,但是,除了这些还用到了哪些呢,究竟又是怎么是实现的

  • JS组件Bootstrap实现弹出框和提示框效果代码

    前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的系统有一个友好的弹出提示框,自然能给用户很好的页面体验.前面几章介绍了bootstrap的几个常用组件,这章来看看bootstrap里面弹出框和提示框的处理.总的来说,弹出提示主要分为三种:弹出框.确定取消提示框.信息提示框.本篇就结合这三种类型分别来介绍下它们的使用. 一.Bootstrap弹出框

  • js实现遮罩层弹出框的方法

    本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关

  • JS组件Bootstrap实现弹出框效果代码

    为页面内容添加一个小的覆盖层,就像iPad上的效果一样,为页面元素增加额外的信息. 插件依赖 弹出框依赖工具提示插件,因此需要先加载工具提示插件. 选择性加入的功能 出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们. 弹出框在按钮组和输入框组中使用时,需要额外的设置 当提示框与.btn-group 或 .input-group联合使用时,你需要指定container: 'body'选项(见下面的文档)以避免不需要的副作用(例如,当弹出框显示之

  • JSF中confirm弹出框的用法示例介绍

    复制代码 代码如下: function checkInput(objectSource) { if(objectSource.onclick){ objectSource.oldOnClick = objectSource.onclick; objectSource.onclick = null; } var attachfile = $('#attachment').val(); if(content.indexOf("附件") != -1 && attachfile

  • js简单的弹出框有关闭按钮

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JS点击图片弹出文件选择框并覆盖原图功能的实现代码

    简单说下原理,把显示的图片的<img>标签 和上传文件的 <input> 标签放在同一个div下,设置<img>的大小和<input>的大小一样,<input> 设置透明度为0,用定位和设置优先级把input浮动在<img>上方,这样点击图片就能选择上传图片,选择完图片后获取图片地址,替换掉原来的默认图片就能实现覆盖原图功能. js代码: <script type="text/javascript" src=

  • JS点击某个图标或按钮弹出文件选择框的实现代码

    下面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下 具体代码如下所示: <HTML> <head> <script type="text/javascript" src="script/jquery-1.6.2.min.js"></script> <script type='text/javascript'> function selectFile(){

  • jsp中点击图片弹出文件上传界面及实现预览实例详解

    jsp中点击图片弹出文件上传界面及实现预览实例详解 花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&qu

  • jsp中点击图片弹出文件上传界面及预览功能的实现

    花了两天时间琢磨一下图片预览的功能 任务需求如下: 1:jsp页面中有一个图片(pic_1) 2:点击图片弹出类似于资源管理器的界面 3:选择完某一个图片之后在pic_1处预览 我在IE8上试验下面这段代码,可以实现上述功能,没有在别的浏览器中测试,如果各位朋友知道多种浏览器的支持方法,请赐教,共同学习,谢谢. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:

  • 利用javaScript实现点击输入框弹出窗体选择信息

    在这里奉上源代码,没有做样式处理,不过功能是可以的,希望大家可以和我交流交流! 复制代码 代码如下: <html> <head>  <title>点击弹出DIV选择信息</title>     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">     <meta http-equiv="description&

  • js 点击按钮弹出另一页,选择值后,返回到当前页

    1. 效果图: 2. 主页面的代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> function open_windows_and_get_selectedinfo(openwind

  • 设置点击文本框或图片弹出日历控件的实现代码

    <input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker "> <input class="canlderImg" data-tag="start" type="ima

  • js实现点击弹窗弹出登录框

    本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码,供大家参考,具体内容如下 1 图片预览 2 index.html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

  • js点击文本框弹出可选择的checkbox复选框

    本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解和扩展. 代码如下: <html> <head> <meta charset="gb2312"> <title>js点击文本框弹出可选择的checkbox复选框</title> <style type="text/

  • JS实现单击输入框弹出选择框效果完整实例

    本文实例讲述了JS实现单击输入框弹出选择框效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

随机推荐