Bootstrap自定义文件上传下载样式 javascript技巧.doc

Bootstrap自定义文件上传下载样式
在平时工作中，文件上传下载功能属于不可或缺的一部分。bootstrap前端样式 框架也使用的比较多，现在根据bootstrap强大的样式模板，自定义一种文件下 载的样式。
后续会使用spring MVC框架实现文件上传的全部代码，敬请期待。
先看图片示例：本示例包括下载样本文件样式和上传文件样式。
选择文件： &Browse
直接先上代码，最后讲解：
<div class=，zform-group col-md-12 has-feedbackz/ id=〃file〃>
<label for=〃〃 class=zzcontrol-label col-nid-4〃>选择文件:〈/label〉
<div class二〃col-nid-4 input-groupz，>
<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-fol der-openzz></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
html5的基本文件上传样式
<input type二name=〃file〃>
样式会根据不同的浏览器显示不同的效果。
字体图标
可以使用bootstrap内置的glyphicons字体图标，也可以使用Font Awesome 的字体图标。具体使用教程参考官网： glyphicons： http://v3. bootcss. com/components/#glyphicons
Font Awesome： http://fontawesome. io/
本例中使用到两个图标，<i class=，，fa fa-fo 1 der-open，z><i class=，，fa fa~download/z>
或者<i class="glyphicons glyphicons-folder-open"〉〈i class="glyphicons g1yphicons-down1oad-a11 〃 >
css3 : pointer-events
在 bootstrap 中，.form-control-feedback 的 pointer-events 设置为 none, 导致在点击下载样本按钮时无法选取元素，现在设置为autOo
语法：
pointer-events：auto | none | visiblep