JS点击图片弹出文件选择框并覆盖原图功能的实现代码
作者：小城依旧 发布时间：2024-02-26 07:17:33
标签：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点击图片弹出文件选择框并覆盖原图功能的实现代码网站的支持！
来源：http://blog.csdn.net/u014558009/article/details/77541184
0
投稿猜你喜欢
安装好所需要的插件和包：python、django、pip等版本如下：采用Django REST框架3.01、在python文件夹下D:\p- 题目描述原题链接 :268. 丢失的数字给定一个包含 [0, n] 中 n 个数的数组 nums ，找出 [0
- 调用bianli()函数,这里是遍历F:盘，bianli("F:\")'这里设置文件夹路径，你可以改为其它文件夹
- 微软在去年可谓是动作比较大的一年，在去年3月份推出了最新版的IE8浏览器，而在年底又发布全新的操作系统Windows 7，自此新产品的市场占
- 1分钟快速生成用于网页内容提取的xslt，具体内容如下1、项目背景在《Python即时网络爬虫项目说明》一文我们说过要做一个通用的网络爬虫，
- 1.命令介绍最近学习并使用了一个python的内置函数dir，首先help一下：>>> help(dir)Help on
- 页面跳转页面跳转的url中必须在最后会自动添加【\】，所以在urls.py的路由表中需要对应添加【\】from django.shortcu
- 一、单表查询—>更新UPDATE table_nameSET field1=new-value1, field2=new-value2
- 学生管理系统相信大家学各种语言的时候，练习总是会写各种管理系统吧，管理系统主要有对数据的增删查改操作，原理不难，适合作为练手的小程序数据的结
- Flask-SQLAlchemy安装和建表操作请参考这里。 # Role表class Role(db.Model):
- <％'***********************************************'函数
- 下载编译器protoc两种方式：1、使用google官方protoc下载地址:https://github.com/google/proto
- 这篇文章主要介绍了Python进度条的制作代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- 1、GIL简介GIL的全称为Global Interpreter Lock，全局解释器锁。1.1 GIL设计理念与限制python的代码执行
- 抽象工厂模式（Abstact Factory）是一种常见的软件设计模式。该模式为一个产品族提供了统一的创建接口。当需要这个产品族的某一系列的
- 远控终端的本质1、服务端(攻击者)传输消息 ----> socket连接 ----> 客户端(被攻击者)接收消息2、客户端执行消
- 前言最近发现了一个可以把照片美化的项目，自己玩了玩，挺有意思的，分享一下。Github地址：DPED项目地址下面来看看项目怎么玩？先放一些项
- 过年GUI博客二连发，本打算出去玩玩，奈何空气，天气实在差，遂使用tkinter开发一款GUI刷屏器，写此博客记录一下我的开发思路。一．准备
- 命令行进入python打开cmd——>直接输入python即可，如下退出python方法一：先按Ctrl+z，再按Enter(回车键)
- 在使用Django过程中需要开发一些API给其他系统使用，为了安全把Token等验证信息放在header头中。如何获取：使用request.
