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/
目录
相关文章
|
5月前
|
前端开发
【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap常用样式 - 排版
|
11月前
|
JSON 前端开发 数据格式
bootstrap table表格的点击详情按钮操作
bootstrap table表格的点击详情按钮操作
85 1
|
12月前
|
前端开发 JavaScript 容器
|
11月前
|
前端开发 程序员 Android开发
Bootstrap+jQuery实现卡片标签样式的分页
Bootstrap+jQuery实现卡片标签样式的分页
58 0
|
5月前
|
前端开发
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
Bootstrap 5 保姆级教程(四):信息提示框 & 按钮
|
5月前
|
前端开发
bootstrap样式代码案例
bootstrap样式代码案例
|
5月前
|
前端开发 JavaScript 容器
bootstrap样式
bootstrap样式
|
5月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
96 0
|
11月前
|
前端开发
如何去掉bootstrap按钮边框
如何去掉bootstrap按钮边框
|
5月前
|
前端开发 JavaScript 容器
BootStrap 组件和样式
BootStrap 组件和样式
61 0
下一篇
无影云桌面