Bootstrap自定義文件上傳下載樣式

更新時(shí)間：2016年05月26日 14:46:04 作者：ThomasCui

這篇文章主要教大家如何使用Bootstrap自定義文件上傳下載樣式，感興趣的小伙伴們可以參考一下

在平時(shí)工作中，文件上傳下載功能屬于不可或缺的一部分。bootstrap前端樣式框架也使用的比較多，現(xiàn)在根據(jù)bootstrap強(qiáng)大的樣式模板，自定義一種文件下載的樣式。

后續(xù)會(huì)使用spring MVC框架實(shí)現(xiàn)文件上傳的全部代碼，敬請期待。

先看圖片示例：本示例包括下載樣本文件樣式和上傳文件樣式。

直接先上代碼，最后講解：

<div class="form-group col-md-12 has-feedback" id="file">
    <label for="" class="control-label col-md-4">選擇文件:</label>
    <div class="col-md-4 input-group">
    <input id="lefile" type="file" style="display:none">
    <span class="input-group-addon" onclick="$('input[id=lefile]').click();" style="cursor: pointer; background-color: #e7e7e7"><i class="fa fa-folder-open"></i>Browse</span>
    <input id="photoCover" class="form-control" type="text">
    <span class="fa fa-download form-control-feedback" style="cursor: pointer;pointer-events: auto;"></span>
    </div>
   </div>

主要涉及到的技術(shù)有：bootstrap；css3的pointer-events；html5

1. html5的基本文件上傳樣式

<input type="file" name="file">
樣式會(huì)根據(jù)不同的瀏覽器顯示不同的效果。

2. 字體圖標(biāo)

可以使用bootstrap內(nèi)置的glyphicons字體圖標(biāo)，也可以使用Font Awesome的字體圖標(biāo)。具體使用教程參考官網(wǎng)：

glyphicons： http://v3.bootcss.com/components/#glyphicons

Font Awesome： http://fontawesome.io/

本例中使用到兩個(gè)圖標(biāo)， <i class="fa fa-folder-open"><i class="fa fa-download">

或者<i class="glyphicons glyphicons-folder-open"><i class="glyphicons glyphicons-download-alt">

3. css3 ：pointer-events

在bootstrap中， .form-control-feedback 的pointer-events設(shè)置為none，導(dǎo)致在點(diǎn)擊下載樣本按鈕時(shí)無法選取元素，現(xiàn)在設(shè)置為auto。

語法：

默認(rèn)值：auto

適用于：所有元素

繼承性：有

動(dòng)畫性：否

計(jì)算值：指定值

取值：

auto：與pointer-events屬性未指定時(shí)的表現(xiàn)效果相同。在svg內(nèi)容上與visiblepainted值相同
none：元素永遠(yuǎn)不會(huì)成為鼠標(biāo)事件的target。但是，當(dāng)其后代元素的pointer-events屬性指定其他值時(shí)，鼠標(biāo)事件可以指向后代元素，在這種情況下，鼠標(biāo)事件將在捕獲或冒泡階觸發(fā)父元素的事件偵聽器。
其他值只能應(yīng)用在SVG上。

4. 上傳文件的按鈕實(shí)現(xiàn) ----- bootstrap組合框的使用

.input-group 和 .input-group-addon的使用。