input file 上传隐藏美化

html5系列:伪主动触发input:file的click事件 背景从前,input:file是不能主动触发click事件的,据说是安全方面的考虑。因此,在美化input:file的时候就麻烦了,最通用的方案是,制作一个经过美化后的<button>,然后把input:file调整好尺寸,覆盖在<button>上方,然后再设置 opacity: 0;,如此一来,用户看到的是<button>,点击的却其实是input:file 阅读详情

  最近有一天,因为头像上传的 file 隐藏问题,加了个班,今天刚好有时间,赶紧记录一下。
  先上代码,就是一个 css 样式优化。
  

/*选择文件上传input css*/
.am-form-file
{
  position:relative;
  overflow:hidden;
}
.am-form-file input[type=file]
{
  position:absolute;
  z-index:1;
  width:100%;
  font-size:50rem;
  opacity:0;
  cursor:pointer;
}

html 文件

<li class="am-form-file">
    <div class="weui-cell__ft">
    <img id="icon" src="${member.face!''}"class="user-img">
    </div>
    <input id="file1" name="file" type="file" hidefocus="true" onchange="uploadyasuo(this.files,this.id);"accept="image/*">
</li>

注意重点,就是在 file 的父级容器设置样式,容器可以是 li div 等。

个人微信公众号,追寻自由,分享生活!
这里写图片描述

文件上传input file简便美化方案(css) 件上传input在各个浏览器里表现形式都不一样,这里通过css样式控制,尽量在多浏览器中的表现都一样 立即下载

相关推荐

prokka-原核及病毒基因组高效便捷注释

文章目录简介安装使用参考 简介 Prokka: rapid prokaryotic genome annotation 全基因组注释是在一组基因组DNA序列中识别感兴趣的特征,并用有用的信息标记它们的过程。Prokka是一款软件工具,可以快速注释细菌、古生菌和病毒基因组,并生成符合标准的输出文件。 安装 conda install -c conda-forge -c bioconda -c defaults prokka Test Type prokka and it should output its

Neptuneyut的博客 3312

input file详细介绍、更改css样式、获取图片地址、彻底清空上传文件(建议收藏)

介绍 input 全部类型 input 框的类型到底有多少种呢,零零散散算下来有二十多种 总述 常用的并且能为大多数浏览器所识别的类型大概有:text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。 另外还有一些类型:tel、email、url、datetime、search。这些类型部分浏览器不支持识别或校验。 text

AC_Surprise的博客 1万+

如何用SoulChat2.0快速克隆你的心理咨询师?手把手教你搭建AI数字孪生体

本文详细介绍了如何利用SoulChat2.0框架快速构建心理咨询师的AI数字孪生体。通过其核心PsyDT技术,仅需少量真实案例即可合成风格数据并微调大模型,从而低成本地创建能高度模仿特定咨询师语言风格和专业技术的AI分身,适用于预约访谈、心理教育等辅助场景,实现高效的人机协作。

julia4scientist的博客 979

前端原生input file自定义样式 去除文件内容、并限制上传文件格式以及大小

使用 CSS 样式来美化元素,通常通过隐藏默认样式,然后创建一个自定义的按钮或样式来替代。

2885

高熵合金AlCoCrFeNi/金刚石摩擦案例代码

本文介绍金刚石与高熵合金AlCoCrFeNi摩擦的案例。 在之前的文章中,介绍过使用fix indent命令实现虚拟球的摩擦,本文介绍使用金刚石实体球实现高熵合金摩擦的方法。 主要的模拟过程如下: (1)基体建模 建使用原子替换法获得高熵合金初始模型,升温到3000K驰豫后,冷却至300K,获得平衡组织。 (2)摩擦球建模 在高熵合金平衡组织的模型中添加金刚石摩擦球,使用change_box命令扩大box尺寸,添加金刚石摩擦球,并设置混合力场。 (3)摩擦过程 摩擦球下压一定深度后,沿y方向进行摩擦,摩擦

lammps_jiayou的博客 2900

高速特征金字塔多角度旋转模板匹配(工业零部件缺陷检测C++ Opencv版)

博主在性能较好的笔记本上测试算法全部执行效果大约为45ms,在一般配置的笔记本上博主在性能较好的笔记本上测试算法全部执行效果大约为130ms。下图即为实际检测效果。本文最后附有完整代码:Qt版和MFC版本(可直接运行)。...

认真努力,做一只会飞的毛毛虫。 5547

input file的CSS设定

 input type=file 附带按钮的样式几乎不被CSS所控制。在其它按钮应用了特殊格式之后,这种按钮在界面上显的极不协调。就目前流行的几大浏览器来看,试图用样式表控制这种按钮的样式(或更改按钮上文字)都是不可能的。因而一些人采取隐藏input type=file而采用标准的按钮来代替它的方法。以下是一种比较简洁的实现,可以工作在IE中。其中的关键是,IE为Form控件提供了click()方

Niuniu的专栏 7030

详解Agent Skills:让AI拥有更多专业能力(什么是Agent Skills?如何创建?如何使用?如何获取?)

本文分享如何将零散指令沉淀为可复用的 AI 能力模块🧩,介绍什么是Agent Skills?如何创建?如何获取?📚

XiaoqiangClub的博客 1271

input file css 样式

子div高度填充父div、子div高度适应父div 子div设置为: padding-bottom: 100%; //内边距为父div高度,导致子div高度向下延伸 margin-bottom: -100%; //外边距为父div高度,导致下方div向上挤压子div,但是由于父div的存在挡住了挤压,子div得以填充父div 父div添加: overflow:hidden; //由于子div依然过高,出现了滚动条,隐藏就好了 但是这会出现 border-bottom 下边框消失的问题。 ...

weixin_44061022的博客 1594

基于STM32的嵌入式平台实现EtherCAT主站

本文将介绍如何在基于STM32的嵌入式平台上构建EtherCAT主站,并提供相应的源代码。使用SOEM库提供的API函数,我们可以实现与EtherCAT从站设备的实时通信和数据交换。在STM32的代码中,使用SOEM库提供的API函数初始化EtherCAT主站。在SOEM库中,我们可以找到EtherCAT主站的实现代码和相关的API函数。使用SOEM库提供的API函数实现EtherCAT主站的功能,包括发送和接收EtherCAT数据帧、处理从站设备的状态等。确保连接正常并且设备能够相互通信。

CodeSageX的博客 2834

OPENSSL使用方法

预备知识KEY 通常指私钥。CSR 是 Certificate Signing Request 的缩写,即证书签名请求,这不是证书,只是包含申请证书的基本信息。生成证书时要把这个提交给权威的证书颁发机构,颁发机构审核通过之后,再根据这些申请信息生成相应的证书。CRT 即 certificate的缩写,即证书。 X.509 是一种证书格式。对X.509证书来说,认证者总是CA或由CA指定的人,一份...

zxm8513优快云博客 1215

file控件与input标签的属性type=“hidden“标签

file控件 input标签的属性type="hidden"标签

heliuerya的博客 1268

【教程4>第8章>第10节】OFDM完整通信链路项目的FPGA开发4——插入导频

本文介绍了基于MATLAB和Verilog的导频插入设计与实现方法。首先回顾了MATLAB中导频插入的算法实现,展示了每32个数据插入一个导频的设计。接着详细说明了Verilog硬件实现方案,包括导频序列定义、计数器设计、FIFO模块等关键部分。通过仿真测试验证了设计的正确性,输出了插入导频后的序列、导频序列以及调整时序后的序列。最后提供了相关视频教程资源,帮助读者理解设计过程。该设计实现了数据与导频的精确插入,为OFDM等通信系统开发提供了实用参考。

FPGA/MATLAB学习教程/源码/项目合作开发 395

js修改input file标签样式

在进行文件上传得过程中,通常需要用到input file 标签,但是由于其默认的表单元素丑陋的外观,你们是不是非常地想吐槽,想大刀阔斧地修改成你自己的所需要的样式呢? 今天我在做上传的时候,也遇到了这个问题,真心太丑,和周围的其他表单元素,完全是格格不入啊。于是就想深入学习了解下,然后找到了一个比较简单的方法。其实很简单,就是通过label标签与input标签绑定,隐藏input标签,给label...

小青蛙的博客 3734

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

input file 文件上传标签美化

input 标签通过设置 type 属性为 file,则可以选中文件,通过 accept 设置上传类型 <label class="control-label file"> <input type="file" class="upload" @change="addImg" ref="inputer" multiple accept="image/png,image/jp...

qq_36437172的博客 1507

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

html上传文件的按钮优化,美化文件上传按钮自定义input file样式

input file的样式不能直接用css来美化,我们可以曲线救国,把input file的透明度降低为0,相当于把这个控件隐藏了,实际上只是透明度为0,还是存在的,然后把div套上去,让div充当file的按钮。所以这个办法很简单,但是,把input file的透明度降低,连选择文件后的文件名也被隐藏了,这下可怎么办?那就只能用jquery获取file的文件名了。文件上传file美化*{marg...

weixin_39928003的博客 758

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

默认的input上传文件太丑怎么办?美化一下!

默认的input上传文件太丑怎么办?美化一下!

苏墨 1713

[js实例] input type=file 上传图片预览 createObjectURL

一直以来在网页中上传图片都使用的原始的 input type=file ,样子很丑,而且只能显示图片的名称,无法预览,今天自己动手写了一个组件,并美化了一下。样式的实现原理就是网上流行的隐藏input控件透明度opacity=0的办法,图片的预览实现原理使用了javascript里的createObjectURL方法。一、css 部分:.list { padding: 10px;} .list:af

我的米饭 2547

美化文件上传样式

前端开发中总会涉及到文件上传,制作一个不需要CSS专门美化的样式: 首先,先看一下效果图: 引入jQuery和bootstrap 代码如下: <div class="row" style="margin-top: 50px;"> <form class="form-inline" id="excelForm" action="/index" ...

iaoyou1的博客 4809

input上传按钮[type=file]样式自定义

html部分代码如下: <input type="file" name="file" id="file_headerpic" /> <label for="file_headerpic">上传照片</label> css部分代码如下: input[type=file]{ display: none; opacity: 0; } label{ ...

gyueh的博客 962

php文件上传前端页面样式,CSS_用css alpha 滤镜 实现input file 样式美化代码,在WEB上传文件时,要用到上传 - phpStudy...

用css alpha 滤镜 实现input file 样式美化代码在WEB上传文件时,要用到上传框:这东东在IE(其他偶没经过测试)中是一个非常特殊的对象。 如果是您手动写入的或其他对象经过某些事件触发填入的值 ,由于安全问题,在进行提交表单时,往往会被清空,所以上传失败。 简单点说,除非你的鼠标亲自点到了上传框f上,IE才会给你上传文件!哪怕你将 f 的onclick句柄赋给某个对象,如:你 “...

weixin_31596631的博客 211

伪主动触发input:file的click事件

背景 从前,input:file是不能主动触发click事件的,据说是安全方面的考虑。因此,在美化input:file的时候就麻烦了,最通用的方案是,制作一个经过美化后的,然后把input:file调整好尺寸,覆盖在上方,然后再设置 opacity: 0;,如此一来,用户看到的是,点击的却其实是input:file。 html5允许在click事件的callback中主动出发inp

学如逆水行舟,不进则退 1万+

前端知识分享小课堂—html(input的file 控件相关知识及美化)

今天分享下” 前端知识分享小课堂—html(input的file 控件相关知识及美化)“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 在一些网站进行上传时,当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能,用input的file控件来实现就好啦~ XML/HTML Code复制内容到剪贴板 <!doctype html> <html lang="en">

yunduanaoligei的博客 713

AxureRP9实例-上传附件教程,并且美化上传元件SL090002

因为Axure自带的文件上传是通过设置输入框类型为File实现的,生成预览后奇丑无比,本文通过一些变通的方法,实现正常的文件上传效果——点击按钮,选择文件,开始上传。

colin5210的博客 354

解决button无法触发input类型为file的方法

situation 默认input[type=file]太丑,做了个美化的button,对其添加click事件后发现只能选择文件,而点击提交按钮是无法真正上传文件的 task 进行伪装,当点击button时实际上点在input[type=file]上 action 通过CSS,使input[type=file] - 位于按钮上层 - 大小与button相同 - opacit...

zhangyingji 7361

实现input元素(file类型)自定义外观的方法

用透明效果和定位间接实现

m0_67193261的博客 547
上一篇: 时间戳转 Date 字符串出现误差
下一篇: git 教程推荐
ETLshow
博客等级 码龄11年 1粉丝 25原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值