jquery-filestyle上傳按鈕樣式使用

改變文件上傳按鈕樣式，使用button代替file input，在ie10及一下版本會(huì)報(bào)錯(cuò)的解決方法，就是把file input設(shè)置成透明，覆蓋在button上面，參考文章：https://www.cnblogs.com/xuehaoyue/p/6978374.html

下面的方法是使用jquery-filestyle控件樣式，需要依賴jquery和bootstrap，網(wǎng)上下載jquery-filestyle之后，里面有open-iconic-bootstrap.css和bootstrap-filestyle.min.js，這兩個(gè)文件是主要的，可能還會(huì)看到j(luò)query-3.2.1.slim.min.js這個(gè)文件，它其實(shí)就是jquery.min.js的精簡(jiǎn)版，如果有jquery.min.js就不用引用jquery-3.2.1.slim.min.js這個(gè)文件了

其中open-iconic-bootstrap.css這個(gè)文件中使用相對(duì)路徑引入了上一級(jí)目錄下fonts文件夾下的文件，是一些圖標(biāo)，所以這兩個(gè)文件夾
的相對(duì)位置不能改變，不然需要修改css里源碼路徑，這個(gè)就麻煩了

這些必要的文件引入之后，就可以改file input 的樣式了
首先需要一個(gè)file input標(biāo)簽：
<input type="file">
只寫一個(gè)type屬性就行，其它的不用寫，有的加上了一個(gè)class="filestyle"，那只是用標(biāo)簽屬性渲染input的方式，我現(xiàn)在說的方式是用js方式渲染，下面就是了：

$('input[type=file]').filestyle({
                //badge: false,//是否顯示選擇文件數(shù)量角標(biāo)
                //input : false,//是否顯示input文件名，filestyle自帶的input
                btnClass : 'btn-primary',//選擇文件按鈕的樣式
                text: '選擇文件',//按鈕上顯示的文字，
                htmlIcon : '<span class="oi oi-folder"></span> '//按鈕上的文件圖標(biāo)，注意這個(gè)引號(hào)后面多一個(gè)空格，這個(gè)空格是圖標(biāo)和text中設(shè)置的文字中間空隙，如果刪掉這個(gè)空格，圖標(biāo)和文件會(huì)非常緊湊，不太自然
            });

還有其他的屬性這里就先不講述了，這些已經(jīng)能滿足目前的要求了

我要做的是美化一下選擇文件的按鈕，選擇按鈕方式代替input file是因?yàn)槟J(rèn)的input file太難看，用按鈕click事件中主動(dòng)觸發(fā)input file選擇文件在ie下又是會(huì)出錯(cuò)的，所以想到用一現(xiàn)在的方法解決

直接貼代碼：

$('input[type=file]').filestyle({
                input : false,
                btnClass : 'btn-primary',
                text:'選擇文件',
                htmlIcon : '<span class="oi oi-folder"></span> '
            });

原來項(xiàng)目中已經(jīng)有input顯示文件名了，所以我這里不準(zhǔn)備用它自帶的input，所以我設(shè)置成false，

用上之后發(fā)現(xiàn)它的這個(gè)button獨(dú)占一行，是這個(gè)樣子：

這個(gè)只能根據(jù)頁面布局的情況調(diào)樣式了，下面分享我的這種情況，可能對(duì)大家也有效：
我把bootstrap-filestyle.min.js中創(chuàng)建button的最外層標(biāo)簽加了一點(diǎn)樣式，從瀏覽器查看button元素，發(fā)現(xiàn)它最外層是被一個(gè)div套著，class="bootstrap-filestyle input-group"，去bootstrap-filestyle.min.js文件中搜這個(gè)代碼，發(fā)現(xiàn)只有一個(gè)地方
給他添加style：

效果如下：

我試了一下和這個(gè)項(xiàng)目頁面布局不一樣的情況，這種方式就不好用了，只能看具體情況調(diào)了。

之后覺得這個(gè)按鈕距離左邊的距離有點(diǎn)大，查看之后是里面有個(gè)span標(biāo)簽有個(gè)margin-left:20px的樣式，這個(gè)樣式使用的bootstrap.css中的，不能改這個(gè)文件，只能單獨(dú)改span標(biāo)簽樣式：

加完之后效果：