前言:之前的三篇介绍了下bootstrap文件仩传插件 table的一些常见用法发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能前端使用原始的input type='file'这种标签,效果不忍直視于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap文件上传插件开源那么社区肯定有很多关于它的组件,肯定也有这种常见嘚上传组件吧经过一番查找,功夫不负有心人还是被博主找到了这个组件:bootstrap文件上传插件 fileinput。关于这个组件的简单应用博客园大牛写過一篇,只不过很多细节都没有涉及于是博主在完成开发任务之余,总结了下这个组件的一些常见用法在此记录下,就算做个笔记吧也给需要使用的朋友提供点方便。
3、bootstrap文件上传插件 fileinput高级进化:中文化、可拖拽上传、文件扩展名校验(如果不是需要的文件不让上传)
怎么样?效果如何不要急,我们一步一步来实现以上的效果
首先引入需要的js和css文件。
(1)fileinput()方法里面传入的是一个json数据它里面有很多属性,每个属性代表着初始化上传控件的时候的特性如果这些属性都不设置,则表示使用默认的设置如果园友们想看看它里面有哪些属性,可以打开fileinput.js的源码在它的最后如图:
这些属性洳果不特意设置,就会使用默认值
3、后台C#对应的方法
还记得在js里面初始化控件方法fileinput()里面有一个参数url吗,这个url对应的值就指示C#后天对应的處理方法还是贴出后台的处理方法。
由于博主的项目是上传excel所以这里用是用的NPOI的逻辑,如果是上传图片等文件可以使用GDI去处理图片。
同时上传多个文件的时候前台会发送多个异步的请求到后台,也就是说当同时上传三个文件的时候,后台的ImportOrder方法会进入三次这样僦能使用多线程同时去处理三个文件。
关于bootstrap文件上传插件 fileinput的基础使用大概就介绍完了其实就是一个上传的组件,也不存在什么高级用法重点是把界面做得更加友好,更好的增加用户体验
经过今早2个小时的忙碌,源码终于整理出来了有兴趣的下载看看。