bootstrap上传之后的处理_JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

前言：之前的三篇介绍了下bootstrap table的一些常见用法，发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能，前端使用原始的input type='file'这种标签，效果不忍直视，于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源，那么社区肯定有很多关于它的组件，肯定也有这种常见的上传组件吧。经过一番查找，功夫不负有心人，还是被博主找到了这个组件：bootstrap fileinput。关于这个组件的简单应用，博客园大牛伍华聪写过一篇基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用，只不过很多细节都没有涉及，于是博主在完成开发任务之余，总结了下这个组件的一些常见用法。在此记录下，就算做个笔记吧，也给需要使用的朋友提供点方便。

源码以及API地址：

一、效果展示

1、原始的input type='file'，简直不忍直视。

2、不做任何装饰的bootstrap fileinput：(bootstrap fileinput初级进化)

3、bootstrap fileinput高级进化：中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件，不让上传)

拖拽上传

上传中

4、bootstrap fileinput究极进化：允许同时多线程上传多个文件。

上传中

上传完成后

二、代码示例

怎么样？效果如何？不要急，我们一步一步来实现以上的效果。

1、cshtml页面

首先引入需要的js和css文件。

//bootstrap fileinput

bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include("~/Content/bootstrap-fileinput/js/fileinput.min.js","~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"));

bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include("~/Content/bootstrap-fileinput/css/fileinput.min.css"));

@Scripts.Render("~/Content/bootstrap-fileinput/js")

@Styles.Render("~/Content/bootstrap-fileinput/css")

然后定义input type='file'标签

×

请选择Excel文件