Bootstrap的文件上传input太丑?快速用好看的button代替它!

近期在做关于bootstrap的一个项目,不得不说,bootstrap没有对文件上传功能进行美化

<input type="file"> <!--依旧是丑陋的按钮-->
<button class="btn btn-info"><!--相比起来按钮十分好看-->

可是无奈按钮没有文件上传功能,如果要去定义一个文件上传函数来绑定button显得有点舍近求远。因此这里给出一种方法,只需要定义一个简单的函数即可:
通过该函数可以实现点击button就是点击隐藏的input[file]。既利用了bootstrap十分好看的按钮,又不需要重新编写绑定按钮的文件上传功能!

 <script>
    function getFile(){
        $("#getF").click();
    }
 </script>
<input id="get_file" type="file" display="none">
<button class="btn btn-info" onclick="get_file()">
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 13,744评论 3 184
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,331评论 1 45
  • 在Java的世界里,接口是Java最强大的设计之一。笔者对接口的认识和理解包括: 实现一个接口需要四个步骤 接口定...
    sugaryaruan阅读 3,097评论 0 2
  • 日子 起来是一天 睡下是一天 里面 有喜 也有忧 翻开 合上 把日子写成诗 你想要什么样的?
    一点蜜阅读 3,290评论 5 13
  • 以管理员权限运行CMD然后输入:diskpart,启动diskpart工具,在diskpart的提示符下依次输入 ...
    xiaoaiai阅读 14,805评论 0 0

友情链接更多精彩内容