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

2024-08-10 18:39:11

简单说下原理，把显示的图片的<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点击图片弹出文件选择框并覆盖原图功能的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

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

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

复制代码代码如下: function checkInput(objectSource) { if(objectSource.onclick){ objectSource.oldOnClick = objectSource.onclick; objectSource.onclick = null; } var attachfile = $('#attachment').val(); if(content.indexOf("附件") != -1 && attachfile
让JavaScript的Alert弹出框失效的方法禁止弹出警告框

本文将介绍让JavaScript的Alert弹出框失效的方法,也就是禁止让JS弹出警告框. 因为现在都提倡绿色上网环境,弹出框难免会影响你的心情,所以通过以下代码可将Js弹出框屏蔽掉. <script LANGUAGE="JavaScript">  </script> 实现思路是对"al
JS组件Bootstrap实现弹出框效果代码

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

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

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

相关推荐

随机推荐