前言:
之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput。关于这个组件的简单应用,,只不过很多细节都没有涉及,于是博主在完成开发任务之余,总结了下这个组件的一些常见用法。在此记录下,就算做个笔记吧,也给需要使用的朋友提供点方便。
源码以及API地址:
一、效果展示
1、原始的input type='file',简直不忍直视。
2、不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化)
3、bootstrap fileinput高级进化:中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件,不让上传)
拖拽上传
上传中
4、bootstrap fileinput究极进化:允许同时多线程上传多个文件。
上传中
上传完成后
二、代码示例
1、cshtml页面
首先引入需要的js和css文件。
然后定义input type='file'标签