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

網(wǎng)站的建設(shè)創(chuàng)新互聯(lián)專注網(wǎng)站定制,經(jīng)驗(yàn)豐富,不做模板,主營(yíng)網(wǎng)站定制開(kāi)發(fā).小程序定制開(kāi)發(fā),H5頁(yè)面制作!給你煥然一新的設(shè)計(jì)體驗(yàn)!已為樓梯護(hù)欄等企業(yè)提供專業(yè)服務(wù)。

下面的方法是使用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">
只寫(xiě)一個(gè)type屬性就行，其它的不用寫(xiě)，有的加上了一個(gè)class="filestyle"，那只是用標(biāo)簽屬性渲染input的方式，我現(xiàn)在說(shuō)的方式是用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> '
            });

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

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

這個(gè)只能根據(jù)頁(yè)面布局的情況調(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)目頁(yè)面布局不一樣的情況，這種方式就不好用了，只能看具體情況調(diào)了。

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

加完之后效果：

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

名稱欄目：jquery-filestyle上傳按鈕樣式使用-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)源：http://chinadenli.net/article46/dgjieg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站策劃、網(wǎng)站導(dǎo)航、域名注冊(cè)、全網(wǎng)營(yíng)銷推廣、手機(jī)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)