bootstrap改变上传文件按钮样式,并显示已上传文件名-阿里云开发者社区

开发者社区> suboysugar> 正文

bootstrap改变上传文件按钮样式,并显示已上传文件名

简介: 参考博文:  html中,文件上传时使用的的样式自定义html中默认样式很丑,这里用了Bootstrap按钮的样式,并获取文件名显示在其右侧 闲话少叙,直接上代码: 任务数据              上传                   未上传文件 function loadFile(file){     $$("#filename").
+关注继续查看

参考博文:
  html中,文件上传时使用的<input type="file">的样式自定义


html中<input type="file">默认样式很丑,这里用了Bootstrap按钮的样式,并获取文件名显示在其右侧

闲话少叙,直接上代码:

<label for="jobData" class="control-label" style="float:left;padding-left:15px;">任务数据</label>
<div class="col-xs-12 col-sm-4 col-md-4">
    <div class="file-container" style="display:inline-block;position:relative;overflow: hidden;vertical-align:middle">
        <button class="btn btn-success fileinput-button" type="button">上传</button>
        <input type="file" id="jobData" onchange="loadFile(this.files[0])" style="position:absolute;top:0;left:0;font-size:34px; opacity:0">
    </div>
    <span id="filename" style="vertical-align: middle">未上传文件</span>
</div>
<script>
function loadFile(file){
    $$("#filename").html(file.name);
}
</script>



上传文件前:
image.png

上传文件后:
image.png

如何联系我:【万里虎】www.bravetiger.cn 【QQ】3396726884 (咨询问题100元起,帮助解决问题500元起) 【博客】http://www.cnblogs.com/kenshinobiy/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Spring Boot四:配置文件详解properties
一.配置随机数,使用随机数 在application.properties文件添加配置信息 #32位随机数 woniu.secret=${random.value} #随机整数 woniu.number=${random.
1763 0
Android官方开发文档Training系列课程中文版:分享文件之请求一个共享文件
原文地址:http://android.xsoftlab.net/training/secure-file-sharing/request-file.html 当APP需要访问一个被其它APP所共享的文件时,这个APP通常需要发送一个请求给共享文件的那个APP(服务端),在大多数的情况下,这个请求会启动一个服务端的Activity,这个Activity会展示可以共享的文件。
753 0
Android官方开发文档Training系列课程中文版:分享文件之分享一个文件
原文地址:http://android.xsoftlab.net/training/secure-file-sharing/share-file.html 一旦APP设置通过URI的方式共享文件,你需要响应其它APP请求这些文件的请求。
672 0
关于友好性测试中鼠标样式的修改
在日常的界面测试中,我们一定会有这样的CheckPoint:鼠标移到可点击标识的上方时是否变为小手。 上图中的鼠标样式是错误的,要想修改成小手我们需要对应的找到他所对应页面元素的CSS样式并做修改(添加红字部分): div[id$='icmbx'] { display: inl...
786 0
struts2的文件上传
在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来比较繁琐,而且不灵活,在学习了struts2后,struts2为文件上传下载提供了更好的实现机制,在...
774 0
Android官方开发文档Training系列课程中文版:高效显示位图之加载大位图
原文地址:http://android.xsoftlab.net/training/displaying-bitmaps/index.html 引言 学习如何使用一种常规的手段来处理及加载Bitmap对象,这种方式除了使用户界面是可响应的之外,还会避免超出内存的限制。
842 0
Spring Boot读取配置文件的几种方式
Spring Boot获取文件总的来说有三种方式,分别是@Value注解,@ConfigurationProperties注解和Environment接口。这三种注解可以配合着@PropertySource来使用,@PropertySource主要是用来指定具体的配置文件。
523 0
+关注
suboysugar
目前为自由职业者,从事BA业务分析和互联网产品设计等工作,本人先后在中关村在线、中国工商银行和神州数码工作。拥有互联网,移动互联网,软件公司等开发经历。计算机本科毕业,8年互联网和软件行业经验。
710
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载