改变文件上传按钮样式，使用button代替file input，在ie10及一下版本会报错的解决方法，就是把file input设置成透明，覆盖在button上面，参考文章：https://www.cnblogs.com/xuehaoyue/p/6978374.html

网站的建设创新互联专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为楼梯护栏等企业提供专业服务。

下面的方法是使用jquery-filestyle控件样式，需要依赖jquery和bootstrap，网上下载jquery-filestyle之后，里面有open-iconic-bootstrap.css和bootstrap-filestyle.min.js，这两个文件是主要的，可能还会看到jquery-3.2.1.slim.min.js这个文件，它其实就是jquery.min.js的精简版，如果有jquery.min.js就不用引用jquery-3.2.1.slim.min.js这个文件了

其中open-iconic-bootstrap.css这个文件中使用相对路径引入了上一级目录下fonts文件夹下的文件，是一些图标，所以这两个文件夹
的相对位置不能改变，不然需要修改css里源码路径，这个就麻烦了

这些必要的文件引入之后，就可以改file input 的样式了
首先需要一个file input标签：
<input type="file">
只写一个type属性就行，其它的不用写，有的加上了一个class="filestyle"，那只是用标签属性渲染input的方式，我现在说的方式是用js方式渲染，下面就是了：

$('input[type=file]').filestyle({
                //badge: false,//是否显示选择文件数量角标
                //input : false,//是否显示input文件名，filestyle自带的input
                btnClass : 'btn-primary',//选择文件按钮的样式
                text: '选择文件',//按钮上显示的文字，
                htmlIcon : ' '//按钮上的文件图标，注意这个引号后面多一个空格，这个空格是图标和text中设置的文字中间空隙，如果删掉这个空格，图标和文件会非常紧凑，不太自然
            });

还有其他的属性这里就先不讲述了，这些已经能满足目前的要求了

我要做的是美化一下选择文件的按钮，选择按钮方式代替input file是因为默认的input file太难看，用按钮click事件中主动触发input file选择文件在ie下又是会出错的，所以想到用一现在的方法解决

直接贴代码：

$('input[type=file]').filestyle({
                input : false,
                btnClass : 'btn-primary',
                text:'选择文件',
                htmlIcon : ' '
            });

原来项目中已经有input显示文件名了，所以我这里不准备用它自带的input，所以我设置成false，

用上之后发现它的这个button独占一行，是这个样子：

这个只能根据页面布局的情况调样式了，下面分享我的这种情况，可能对大家也有效：
我把bootstrap-filestyle.min.js中创建button的最外层标签加了一点样式，从浏览器查看button元素，发现它最外层是被一个div套着，class="bootstrap-filestyle input-group"，去bootstrap-filestyle.min.js文件中搜这个代码，发现只有一个地方
给他添加style：

效果如下：

我试了一下和这个项目页面布局不一样的情况，这种方式就不好用了，只能看具体情况调了。

之后觉得这个按钮距离左边的距离有点大，查看之后是里面有个span标签有个margin-left:20px的样式，这个样式使用的bootstrap.css中的，不能改这个文件，只能单独改span标签样式：

加完之后效果：

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文标题：jquery-filestyle上传按钮样式使用-创新互联
链接分享：http://scyingshan.cn/article/dgjieg.html