解决input file，实现点击文字上传文件

最新推荐文章于 2021-01-15 07:22:24 发布
最新推荐文章于 2021-01-15 07:22:24 发布
阅读量3.3k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Jruott/article/details/25334985
本文介绍了如何解决input file样式问题，使其能够通过点击文字“资料提交”来触发文件上传。难点在于input file的样式无法直接修改，通过定位将input与文字重合，并设置input为透明，利用z-index确保点击文字区域可以触发上传。同时，针对不同浏览器的兼容性问题，提出了使用em或百分比进行绝对定位的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

需求： 点击文字“资料提交”，实现文件上传

            难点： input本身的file样式，文字无法修改

            点击文字触发input的click事件是不行的

解决： 将input和文字通过定位，使得input和文字重合

            将input设置为透明，若input在文字前还的加上z-index:100,使得input在文字之上，这样当点击文字，也就是他们重合区域就可文件上传了

  •  input在文字之后，无须设置z-index

<span>

<a>

<img  src="../edit.gif" id="edit">

<span>资料提交</span>

<input  style="cursor:pointer

最低0.47元/天 解锁文章

200万优质内容无限畅学
隐藏input file框，点击按钮自动上传文件
qq_31966269的博客
08-23 2414
<button style=“position:relative;” class=“btn btn-info btn-fill btn-wd” id=“btn” name=“btn”> 上传excel <input id=“upfile” style=“opacity:0;width:100%;height:100%;position:absolute;top:0;left:0...
【前端】【探究】HTML - input类型为file时如何实现自定义文本以更好的美化
萌狼蓝天の技术栈
09-25 1311
想到英语四级考了两次都没过，我觉得要多使用英文，所以本文使用英文书写。 本文讲述了遇到的问题，解决的思路，并讲述了解决方案，也许对你会有帮助。 目录Problem descriptionSolutionExample1.Use Button to select file2.Use a box to show selected file‘s nameThe complete code 2022...
html 点击文字或图片弹出上传文件对话框
weixin_34380948的博客
08-14 1705
<!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 runa...
js 实现 input type="file" 文件上传示例代码
weixin_30765505的博客
08-14 162
在开发中，文件上传必不可少但是它长得又丑、浏览的字样不能换，一般会让其隐藏点其他的标签（图片等）来时实现选择文件上传功能 在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让，<input type="file" />隐藏，点其他的标签（图片等）来时实现选择文件上传功能。看代...
点击按钮出现上传文件框
进击的数据菜鸟
09-22 2431
在HTML中插入此隐藏DIV //打开上传窗口 function openUploadWin() { if(!bSelected) { window.alert("请选择要导出的区域!"); return; } upLoadForm.style.left=document.body.scrollLeft+document.body.clientWidt
用自定样式来替代input的文件上传样式
Sophie_U的博客
12-04 587
HTML自带的文件上传选项框样式很原始，对这个元素设置样式并没有行通，所以想通过其他元素的样式来替代它，但将它的文件上传功能与其他元素联系起来。 原始样式： 想实现的效果： 通过讨论目前总结出三个方法：1、用a标签包裹input，对a标签设置样式，通过定位实现点击a标签时，实际触发了input的文件上传框 1)HTML <a class="imgbtn bt
input file上传文件样式支持html5的浏览器解决方案
12-13
最近在使用画布处理图像像素时用到了file上传控件，发现了file上传控件的两个兼容性问题。一个是file上传控件在火狐下无法通过css改变width，另一个是file上传控件在不同的浏览器下的外观和行为都不一样。 下面是...
HTML中文件上传时使用的input type=”file”元素的样式自定义
12-14
这样，用户在点击"上传"时，实际上是在点击透明的`<input type="file">`元素，从而打开文件选择对话框。 最后，为了赋予上传按钮Bootstrap的样式，我们需要引入Bootstrap的CSS和JavaScript库，并为按钮应用相应的...
教你如何改变上传文件input的file属性.doc
10-21
在Web开发中，上传文件是常见的交互功能，通常使用HTML的`<input type="file">`元素来实现。然而，这个元素的默认样式在不同浏览器下可能会显得较为简陋，不符合许多网页的设计风格。因此，我们需要自定义这个元素的...
自定义上传控件input file的样式
03-19
在网页设计中，我们经常需要使用到`<input type="file">`标签来实现文件上传功能，但默认的上传控件样式通常较为简单，不符合现代网页的美观需求。本篇将探讨如何自定义`input file`的样式，打造个性化的上传界面。 ...
点击图片触发input是file的事件
07-21
window.createObjectURL 上传图片，实现web预览
jsp文件上传自定义按钮字体
知识变成人话才有价值，拒绝黑化文章。博主也不是大神，只是平凡大众的一员，希望能够通过丰富的经验，认真的态度，贴合实际的表达对宝友们有所帮助
08-15 513
//通过input标签type="file"实现文件上传 <input type="file" style="display: none" id="import_file" name="import_file" onchange="fileId.value=this.value,onSub()" /> <input type="button" id="import_questi...
input = file 实现上传文件
lwf的博客
07-02 9万+
使用input = file实现文件上传功能， 如果点击提交按钮，提交表单并上传选中的文件： <FormItem label="上传简历"> <div className="section-pushInChannel-fileInput"> <input id="file" onChange={this.handleFileChange} t...
file input 点击没反应_解决input file按钮要点击两次才弹出选择文件窗口
weixin_39646725的博客
01-15 1227
在隐藏的文件输入框上调用click()方法从Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)开始，你可以隐藏掉默认的的文件输入框元素，使用自定义的界面来充当打开文件选择对话框的按钮。实现起来很简单，你只需要使用样式display:none把原本的文件输入框隐藏掉，然后在需要的时候调用它的click()方法就行了。考虑下面的HTML：Se...
扒一扒使用boostrap-fileinput上传插件遇到的坑，Bootstrap-fileinput上传插件的使用详解，
zlb_lover的博客
08-01 8万+
由于公司项目的需求，需要实现动植物名录的添加，包括姓名等信息和图片等，需要使用bootstrap-fileinput的上传插件，在提交添加界面表单数据的同时上传一张或者多张图片，并将上传的图片保存到本地磁盘中(本文是f:盘的目录下)，在在实现的时候，不适用bootstrap-fileinput上传插件本身的上传按钮（因为本身的按钮只能上传图片），需要点击提交，将表单的其他信息和图片一起提交到后台。
input file控件限制上传文件类型
LFSenior
05-27 907
　网页上添加一个input file HTML控件：[html] view plain copy&lt;input id="File1" type="file" /&gt;  　　默认是这样的，所有文件类型都会显示出来，如果想限制它只显示我们设定的文件类型呢，比如“word“,”excel“,”pdf“文件　　　解决办法是可以给它添加一个accept属性，比如：[html] view plain ...
file input 点击没反应_input file 无法打开手机端文件选择器
weixin_42134054的博客
12-29 6739
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.youkuaiyun.com/m0_37805167/article/details/78538044手机端对input file的accept格式有特定的要求,必须要image/.这种的格式,否则会在点击上传时弹出无法打开文件选择器这样的提示框 标签,但是默认的file标签很难看,而且每个浏览器下都有很大差距. 1.一般解决办法...
input的type=file触发的相关事件
热门推荐
现在学习也不晚
07-30 9万+
今天突然用到input相关的事件，突然发现自己还没有总结过input相关事件的运行原理。而且我还竟然翻api去了解了，所以，为了记恨自己，就写了相关与input相关的事件运行的过程。添加了一些相关的方法测试了一下。这一节首先介绍一个input的type=file的运行流程。 我们书写了mousedown，mouseup，click，input，change，focus，blur绑定到了input
input:file的点击事件高级实现
a932411909的博客
02-23 491
有过尝试的人都知道，对于input:file的样式难看的处理方法，一般都是透明化input，实际点击的还是input:file，使用js操纵？ $("#File").click()？这该是大家都会想到的方法，可是，很不好意思，无法起到作用，经过一番查阅，终于找到js操作呢input:file的方法，很简单 1 function clp(){ 2 return docu...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值