Bootstrap4文件上传控件美化

Bootstrap拯救了不太会html+css的我，同时Bootstrap也太方便了，但是，也有一点受限默认一些功能看不到了，今天用到文件上传控件，HTML默认的和Bootstrap4的自定义的都不太合适。

参考：https://blog.csdn.net/qq_34559890/article/details/89675998

Bootstrap4的自定义的，右端的“Browse”很碍眼，选择上传文件并不显示上传文件的名字，看不到就不确定是否选择了上传文件。

HTML默认的，按钮不是常见Button，没法应用BootStrap4美化，可是右边显示上传文件的文件名。

网上看了一些，最后自己修改了出来，效果如下：

代码如下：

<script>function loadFile(file){$("#filePos").html(file.name);}
</script><div class="form-group"><input type="file" name="fileName" id="file" style="width: 0;height: 0" οnchange="loadFile(this.files[0])"><br>
<!--默认的HTML文件上传控件，onchange属性调用JavaScript读取上传的文件名，修改第二个标签的显示内容，同时设置该上传控件长宽为0不显示，不占用页面控件，或者设置hidden，但是会占用一点空间--><label class="btn btn-info" for="file">上传文件</label>
<!--利用标签的for属性实现点击标签触发文件上传，同时设计成按钮样式--><label id="filePos">未上传</label><!--定义一个显示文件名的标签-->
</div>

目前，可以用了。

Bootstrap4文件上传控件美化相关推荐

jquery文件上传控件 Uploadify
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
使用jquery文件上传控件Uploadify来异步上传图片
1.项目中需要图片的异步上传,度娘之后发现有一个插件可以完成这个需求,即是:Uploadify 下面是这个异步上传的插件的一个简单介绍: 基于jquery的文件上传控件,支持ajax无刷新上传,多个文 ...
JQuery文件上传控件Uploadify文档
Uploadify是一个基于JQuery的文件上传控件,支持ajax无刷新上传,比较好用,现在用着一个不爽的地方是--每个版本的属性名和事件名.方法名都有一些不一样,这在遇到问题,查资料的时候会比较麻 ...
文件上传控件自定义样式
文件上传控件<input type="file"/>在不同的浏览器下,显示为不同的样式,并且很难随着不同的设计而进行对应变化,这里将实现一种jquery插件的方法,实现 ...
在WebBrowser中通过模拟键盘鼠标操控网页中的文件上传控件
引言这两天沉迷了Google SketchUp,刚刚玩够,一时兴起,研究了一下WebBrowser. 我在<WebBrowser控件使用技巧分享>一文中曾谈到过"我现在可以通过 ...
html标签手册 360doc,基于AJAX的文件上传控件NetAdvantage for jQuery
NetAdvantage for jQuery 是一款全新的轻量级.高性能的jQuery控件,包含了在线的Video播放控件,基于AJAX的文件上传控件,快速且强大的表格控件,以及创建和编辑Word. ...
bootstrapinput传参数_***文件上传控件bootstrap-fileinput的使用和参数配置说明
特别注意: 引入所需文件后页面刷新查看样式奇怪,浏览器提示错误等,可能是因为js.css文件的引用顺序问题,zh.js需要在fileinput.js后面引入.bootstrap最好在fileinput ...
python bootstrap-fileinput示例_文件上传控件bootstrap-fileinput的使用
一.准备 1.插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下: js:插件核心js代码,引用filei ...
BootStrap文件上传控件
一.准备 1.插件下载地址:https://github.com/kartik-v/bootstrap-fileinput/ 下载后的压缩包解压文件夹内容如下: js:插件核心js代码,引用filei ...

Bootstrap4文件上传控件美化

Bootstrap4文件上传控件美化相关推荐

最新文章

热门文章