BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel...
1星 63 浏览量
2020-08-29
18:48:08
上传
评论 2
收藏 152KB PDF 举报 
BootStrap Fileinput插件和插件和Bootstrap table表格插件相结合表格插件相结合
实现文件上传、预览、提交的导入实现文件上传、预览、提交的导入Excel数据操作步骤数据操作步骤
主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数
据操作步骤,需要的朋友可以参考下
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插件，这样页面上传功
能，在各个浏览器就可以无差异的实现了。
一般情况下，我们需要引入下面两个文件，插件才能正常使用：
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
在File input 插件使用的时候，如果是基于Asp.NET MVC的，那么我们可以使用BundleConfig.cs进行添加对应的引用，加入
到Bundles集合引用即可。
//添加对bootstrap-fileinput控件的支持
css_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/css/fileinput.min.css");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/fileinput.min.js");
js_metronic.Include("~/Content/MyPlugins/bootstrap-fileinput/js/locales/zh.js");
在页面中，我们使用以下HTML代码实现界面展示，主要的bootstrap fileinput插件声明，主要是基础的界面代码
<input id="excelFile" type="file">
Excel导入的的界面展示如下所示。
选择指定文件后，我们可以看到Excel的文件列表，如下界面所示。
资源评论
u0131714372020-12-05你这是在逗我吗？百度上直接拿来就可以了？
weixin_38612811
- 粉丝: 5
- 资源: 934
最新资源
- 学生成绩管理系统（C语言）.txt
- 学生成绩管理系统（C语言）.txt
- Screenshot_2023-12-10-12-52-34-127_net.csdn.csdnplus.jpg
- Screenshot_2023-12-10-12-50-49-374_net.csdn.csdnplus.jpg
- mxnet-cu111-1.9.0b20230903-py3-none-manylinux2014-x86-64.whl
- mxnet-cu110-2.0.0b20220324-py3-none-manylinux2014-x86-64.whl
- mxnet-cu110-1.9.1b20220823-py3-none-manylinux2014-x86-64.whl
- mxnet-cu110-1.9.0-py3-none-manylinux2014-x86-64.whl
- mxnet-cu110-1.9.0b20230903-py3-none-manylinux2014-x86-64.whl
- mxnet-cu110-1.8.0b20210324-py2.py3-none-manylinux2014-x86-64.whl
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
