文件上传下载样式 --- 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的使用