时间：2021-07-01 10:21:17 帮助过：60人阅读
bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput
bootstrap-fileinput在线API：http://plugins.krajee.com/file-input
bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo
这个插件主要是介绍如何处理图片上传的处理操作，原先我的Excel导入操作使用的是Uploadify插件，可以参考我随笔《附件上传组件uploadify的使用》，不过这个需要Flash控件支持，在某些浏览器（如Chrome）就比较麻烦了，因此决定使用一种较为通用的上传插件，这次首先对基于Bootstrap前端架构的框架系统进行升级，替代原来的Uploadify插件，这样页面上传功能，在各个浏览器就可以无差异的实现了。
一般情况下，我们需要引入下面两个文件，插件才能正常使用：
在File input 插件使用的时候，如果是基于Asp.NET MVC的，那么我们可以使用BundleConfig.cs进行添加对应的引用，加入到Bundles集合引用即可。
在页面中，我们使用以下HTML代码实现界面展示，主要的bootstrap fileinput插件声明，主要是基础的界面代码
Excel导入的的界面展示如下所示。
选择指定文件后，我们可以看到Excel的文件列表，如下界面所示。
上传文件后，数据直接展示在弹出层的列表里面，这里直接使用了 Bootstrap-table表格插件进行展示。
这样我们就可以把Excel的记录展示出来，实现了预览的功能，勾选必要的记录，然后保存即可提交到服务器进行保存，实现了Excel数据的真正导入数据库处理。
2、Excel导出操作详细介绍
我们在实际导入Excel的界面中，HTML代码如下所示。
对于bootstrap fileinput的各种属性，我们这里使用JS进行初始化，这样方便统一管理和修改。
上面的逻辑具体就是，设置上传文件的后台页面为：/FileUpload/Upload，以及各种插件的配置参数，uploadExtraData里面设置的是提交的附加参数，也就是后台控制器接收的参数，其中
的函数处理文件上传后的处理函数，如果上传文件返回的结果是成功的，那么我们再次调用ajax来检查这个Excel的字段是否符合要求，如下地址：
如果这个检查的后台返回成功的记录，那么再次需要把Excel记录提取出来预览，并清空bootstrap fileinput文件上传插件，方便下次上传文件。如下代码所示。
其中RefreshExcel就是重新更新上传的附加参数值，方便下次上传，否则附加参数的值一直不变化，就会导致我们设置的GUID没有变化而出现问题。
而其中InitImport就是获取预览数据并展示在Bootstrap-table表格插件上的，关于这个插件的详细使用，可以回顾下随笔《基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理》进行了解即可。
最后就是确认提交后，会通过JS提交数据到后台进行处理，如下代码所示。
3、后台控制器代码分析
这里我们的JS代码里面，涉及了几个MVC后台的方法处理：Upload、CheckExcelColumns、GetExcelData、SaveExcelData。这里分别进行介绍。
文件上传的后台控制器方法如下所示。
文件上传处理后，返回一个通用的CommonResult 的结果对象，也方便我们在JS客户端进行判断处理。
而其中检查我们导入Excel的数据是否满足列要求的处理，就是判断它的数据列和我们预先设置好的列名是否一致即可。
而GetExcelData则是格式化Excel数据到具体的List<TestUserInfo>集合里面，这样我们方便在客户端进行各种属性的操作，它的代码如下所示。
另一个SaveExcelData的函数就是处理数据导入的最终处理函数，主要就是把集合写入到具体的数据库里面即可，具体代码如下所示。
上面这几个函数的代码一般是比较有规律的，不需要一个个去编写，一般通过代码生成工具Database2Sharp批量生成即可。这样可以有效提高Web的界面代码和后台代码的开发效率，减少出错的机会。
整个导入Excel数据的处理过程，所有代码都贴出来了，基本上整个逻辑了解了就可以很好的了解这个过程的代码了。
以上就是BootStrap Fileinput插件和表格插件相结合实现导入Excel数据的文件上传、预览、提交的步骤的详细内容，更多请关注Gxl网其它相关文章！