我是靠谱客的博主 动人大叔,最近开发中收集的这篇文章主要介绍隐藏file控件,用button实现文件上传,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

为什么80%的码农都做不了架构师?>>>   hot3.png

<input type="file">控件不是很美观,很多时候可能更希望用button去代替它实现文件上传

一种方法是用button覆盖file原本的浏览按钮,不足是得精确控制位置和大小,文本框还在

另一种是设置成透明,然后用button叠在上面,同样需要控制位置和大小

还有一种是设置display:none,然后用button间接触发file控件的click,但是这种方式不支持Chrome

查看文档时,刚好看到了visibility属性,我想就是它了,马上测试,果然OK

<button type="button" onclick="upfile.click()">上传文件</button>
<input type="file" id="upfile" onchange="uploadFile()" style="visibility: hidden; position: absolute;">
将file控件设置成hidden后,它依然占据文档空间,于是用absolute让其脱离文档流

这样就可以完全隐藏了,而且Chrome也可以支持了

但是IE就不能支持了,IE下必须主动点击input type=file(label的for触发也可以),间接触发的都会提示“拒绝访问”

转载于:https://my.oschina.net/seast/blog/113959

最后

以上就是动人大叔为你收集整理的隐藏file控件,用button实现文件上传的全部内容,希望文章能够帮你解决隐藏file控件,用button实现文件上传所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(50)

评论列表共有 0 条评论

立即
投稿
返回
顶部