[JS][前端]修改文件input为button样式

问题描述

在开发的时候,遇到了需要提交表单文件的需求,但是原生<input>标签特别不好看,而且还有点击提交文件的提示,这样很影响美观,于是便想着更改<input><button>按钮。

解决方案

  1. 建立一个button按钮,在其上面覆盖表单框,且设置表单的透明度为0,这样虽然用户看到的是button,但是点击的确实
  2. 将隐藏,当点击button的时候,去触发的点击,用户点击的是button,但是触发的是input的事件。

实现方案

  1. 设置input透明度为0的方法
<input class="file" accept="image/*" name="file" type="file">
<input class="btn" id="submit" value="点击拍照上传" type="button">

对应的css样式

.file {width: 150px;height: 50px;position: absolute;top: 50px;left: 30%;z-index: 1;opacity: 0;
}
.btn {width: 150px;height: 50px;font-size: 16px;color: #fff;background: #28abde;border-radius: 5px;position: absolute;top: 50px;left: 30%;
}

这种方法是加了一层看不见的input,用户看到的是button,但是点击的却是input,在网站攻击的时候也可能会用到这种方法,当用户误以为点击了底层的元素,但是实际上点击的顶层看不见的元素,导致泄密。

  1. 设置input不可见,并由button去触发。
<form name="form1"><input type="file" name="picpath" id="picpath" style="display:none;" onChange="document.form1.path.value=this.value"><input type="button" value="上传文件" onclick="document.form1.picpath.click()"> 
</form>

当用户点击button按钮的时候会触发click事件,当文件域的值改变时同时修改对应表单内的值。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/381500.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

源码 连接mysql_MySql轻松入门系列————第一站 从源码角度轻松认识mysql整体框架图...

一&#xff1a;背景 1. 讲故事 最近看各大技术社区&#xff0c;不管是知乎&#xff0c;掘金&#xff0c;博客园&#xff0c;csdn基本上看不到有小伙伴分享sqlserver类的文章&#xff0c;看样子这些年sqlserver没落了&#xff0c;已经后继无人了&#xff0c;再写sqlserver是不可…

ThinkPHP5.1中使用Redis来缓存

问题 在thinkphp5.1项目中需要引入Redis&#xff0c;安装redis后在tp5.1写入相关的操作代码后却一直报错&#xff0c;可能出现的问题如下&#xff1a; 1. 安装不正确&#xff0c;即redis没正常运行 2. 没有添加php_redis驱动扩展 3. php.ini修改位置不正确 4. tp5.1中配置代…

python网页爬虫例子_Python网络爬虫 - 一个简单的爬虫例子

下面我们创建一个真正的爬虫例子 爬取我的博客园个人主页首页的推荐文章列表和地址 scrape_home_articles.py from urllib.request importurlopenfrom bs4 importBeautifulSoupimportre html urlopen("http://www.cnblogs.com/davidgu") bsObj BeautifulSoup(html, &…

asp.net mvc使用的心得和问题的解决方法(陆续更新ing)

1、在mvc下webform的分页控件不能用&#xff0c;只好自己山寨一个轻便的。 1publicclassPageHelp2{ 3 /**//// <summary> 4 /// 总页数 5 /// </summary> 6 public int TotalPageNum { get; set; } 7 /**//// <summary…

[C++][线程安全]单例模式下双检查锁和线程

问题 在设计模式中&#xff0c;有一个很经典的模式-单例模式&#xff0c;它可能是实现上最简单的模式&#xff0c;在代码中也经常使用&#xff0c;在单线程下&#xff0c;毫无疑问延迟化加载是比较常用的&#xff0c;但是在多线程条件下&#xff0c;单例模式的延迟加载可能就会…

java的ZipOutputStream压缩文件的两个问题(乱码和每次zip后文件md5变化)

java的ZipOutputStream压缩文件的两个问题&#xff08;乱码和每次zip后文件md5变化&#xff09; 1、乱码问题可以使用org.apache.tools.zip 2、md5每次都变化只需要设置entry.setTime(1) posted on 2008-11-20 15:49 夜隼 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cn…

python少儿编程课件ppt_Python课程第五期

{getUnitName} 免费 {getTaskName} 剩余观看时长&#xff1a;{watchLimitRemaining} 回放 {activityStartTimeStr} 正在直播中 直播结束 {activityLength} 免费 {getTaskName} 敬请期待 { "id": "1680", "isDefault": "1", "lear…

h5 一镜到底_这些一镜到底的H5还能怎么玩?

前文《单个公众号收入过亿&#xff0c;条漫为什么成为2019风口》提到&#xff0c;加入插画元素的条漫和ps拼接的长图文正处在2019年风口&#xff0c;这种现象也适合描述H5。以往扁平化的H5内容新颖&#xff0c;但视觉上缺乏大幅度的起伏。想要让H5看起来更有律动&#xff0c;就…

visio生成数据表图

http://blog.163.com/zgkingdom126/blog/static/2273473200892714445447/转载于:https://www.cnblogs.com/lishenglyx/archive/2008/11/24/1339746.html

打开端口_打印机ip及端口设置

越洋帮路由网原创&#xff1a;文章是关于"打印机ip及端口设置"的相关知识分享&#xff0c;希望可以帮到大家。 - 素材来源网络 编辑:小易。随着科学技术的发展&#xff0c;各种技术成果也进入到千家万户&#xff0c;近日&#xff0c;有人咨询怎样设置和修改打印机ip及…

博客搬迁声明

博客搬迁 回过头&#xff0c;在CSDN写博客已经好几年了&#xff0c;当初写博客是为了总结自己的ACM解题思路&#xff0c;开始觉得浪费时间&#xff0c;可是写到了现在&#xff0c;慢慢发现自己爱上了写博客这种爱好&#xff0c;反过来看之前自己的想法的时候&#xff0c;会惊叹…

分计算iv值_快捷、经济、实用的光伏及IV曲线测试仪PVPM 1500X

PVPM 1500X IV曲线测试仪pvpm 1500x (1500V,20ADC)可测量光伏模块以及字符串或阵列的 iv 曲线。通过专利程序, 该设备可以直接在光伏系统的安装位置测量和计算峰值功率 ppk、r 和 rp。计算结果和图表可以显示在内部彩色的 tft 显示屏上。因此, 光伏系统的质量控制可以快速、经济…

Open Source Blog 开源ASP.NET/C# 博客平台 v2.5 发布(提供源码下载)

EntLib.com Blog 开源ASP.NET/C# 博客平台 v2.5 发布&#xff08;提供源码下载&#xff09;基于Subtext v2.0 开源ASP.NET博客系统的中文汉化及定制化开发&#xff0c;EntLib.com 开源博客小组根据用户的反馈意见&#xff0c;不断改进系统。2008年11月22日正式发布 EntLib.com …

2018年新年计划

前言 好久没有来csdn了&#xff0c;转眼就到了2018年了。因为最近一年差不多都在捣鼓个人博客&#xff0c;用了好长一段的wordpress&#xff0c;也折腾了很多&#xff0c;但是很不幸的是今年10月份由于主机商的跑路&#xff0c;我的个人博客遭遇了丢失了数据&#xff0c;然后&a…

兄弟3150cdn加粉后清零_兄弟MFC1618MFC1816 tn1035加粉清零方法

兄弟MFC-1618\MFC-1816 tn-1035加粉清零方法 有今天要发的题目的话؛兄弟MFC-1618\MFC-1816 tn-1035加粉清零方法 墨粉盒型号&#xff1a;兄弟TN-1035兄弟MFC-1618的清零方法有两种&#xff1a;一、清粉盒(转动粉盒右侧的齿轮180度)&#xff1b;二、在机器上操作&#xff1b;(以…

python随机生成字符串_python 随机生成字符串数据

不说话字节贴代码&#xff1a; # -*- coding:UTF-8 -*- print (---------------------------game---------------------------) import re from random import randint, choice from string import lowercase from sys import maxint from time import ctime doms (com, edu, …

扩大swap分区--Ubuntu手记之系统配置

因为安装时采用的自动分区&#xff0c;因此我的swap分区是800多M&#xff0c;最近打算用休眠功能&#xff0c;发现总是不成功&#xff0c;报告swap分区不够大&#xff0c;原来ubuntu是采用swap分区来挂起系统的&#xff0c;而我的机器有2G内存&#xff0c;因此要使用挂起功能就…

字体外面怎么加边框_有钱人家连电视墙都发“光”,大理石墙周围加一圈镜面边框,华丽...

阅读本文前&#xff0c;请您先点击上面蓝色字体&#xff0c;再点关 注这样您就可以继续免费收到文章了&#xff0c;每天都有分享&#xff0c;完全是“免费订阅”&#xff0c;请放心关注注&#xff1a;本文转载自网络&#xff0c;如有侵权&#xff0c;请在后台留言联系我们进行删…

[Golang]Go语言学习资源集合

说明 对于新手来讲&#xff0c;入门一门新的语言无疑是有困难的&#xff0c;往往会因为找不到方向而迷失。在我的学习golang的过程中&#xff0c;也碰到了该如何入手的问题&#xff0c;还好我善于搜索&#xff0c;有一些基础&#xff0c;入手的时候没有碰到太多困难。但是如果想…

计算机与人脑_类脑计算机:一种新型的计算系统

近日&#xff0c;中国浙江大学联合之江实验室共同研制成功了国内首台基于自主知识产权类脑芯片的类脑计算机(Darwin Mouse)。这台类脑计算机包含792颗浙江大学研制的达尔文2代类脑芯片&#xff0c;支持1.2亿脉冲神经元、近千亿神经突触&#xff0c;与小鼠大脑神经元数量规模相当…