HTML利用label不设置样式实现隐藏file上传
1. 首先,我们把file input放入一个label,并且将这个label显示为一定的宽高,比如显示为(bootstrap)btn的样式(这个label你把样式搞成啥样都行,都不会影响后面的功能);
2. 为此input增加样式,内联或css文件内写都可以:style="left:-9999px;position:absolute;"
3. 在label内增加文本(作为label btn的显示文本),比如下方示例中的span;
<label id="realBtn" class="btn btn-info">
<input type="file" id="fileInput1" name="file" class="mFileInput" style="left:-9999px;position:absolute;">
<span>点击上传</span>
</label>
如此即可,无需再添加任何js函数,就能让这个label在被点击时,与file input点击产生同样的效果。这是label标签的一个bug,但是这个bug的通用性极好,连ie7都没问题。
我也查过网上的一些方案,我建议大家不要使用triger等模拟点击的方式触发file input的点击,从安全角度讲,js是不建议这样做的,所以兼容性完全没有保障,再就是,使用透明file input在指定区域悬挂遮盖鼠标的方式,因为要用js处理,所以在性能上会有问题,同时,经我测试,在快速操作时,还是会暴露出一些bug的,很挠头,只有我在本文中所写的方法,才是我认为最上乘的方案,有更好的方案,欢迎大家的指点。
如果需要显示文件名,就在file input的change事件里取它的value就行了。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanecce
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24