文件上傳下載樣式 --- bootstrap

廣播： 關注微信公衆號 「jQuery每日經典」 ，有更多資料。微信小程序 -- 前端技術API手冊 也在公衆號首次發佈。有須要的聯繫公衆號中QQ。

在平時工做中，文件上傳下載功能屬於不可或缺的一部分。bootstrap前端樣式框架也使用的比較多，如今根據bootstrap強大的樣式模板，自定 義一種文件下載的樣式。

後續會使用spring MVC框架實現文件上傳的所有代碼，敬請期待。

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

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

　　　　　　　<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>

 

--------------------------------------------------------------------------------------------------------

主要涉及到的技術有： bootstrap， css3的pointer-events， html5

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

<input type="file" name="file">

樣式會根據不一樣的瀏覽器顯示不一樣的效果。

2. 字體圖標

   能夠使用bootstrap內置的glyphicons字體圖標，也能夠使用Font Awesome的字體圖標。具體使用教程參考官網：

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

   Font Awesome： http://fontawesome.io/

  本例中使用到兩個圖標， <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設置爲none， 致使在點擊下載樣本按鈕時沒法選取元素，如今設置爲auto。

  語法： 

   pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

   默認值：auto

   適用於：全部元素

   繼承性：有

   動畫性：否

   計算值：指定值

取值： 

auto：與pointer-events屬性未指定時的表現效果相同。在svg內容上與 visiblepainted值相同

none： 元素永遠不會成爲鼠標事件的target。可是，當其後代元素的pointer-events屬性指定其餘值時，鼠標事件能夠指向後代元素，在這種狀況下，鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。

其餘值只能應用在SVG上。

4. 上傳文件的按鈕實現 ----- bootstrap組合框的使用

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

   

   具體的css渲染自行查看bootstrap源代碼。

5. 下載樣本按鈕的實現 --- 參考bootstrap的表單錯誤提示樣式

     .has-feedback和.form-control-feedback的使用