这篇文章将为大家详细讲解有关怎么在bootstrap中使用fileinput 上传插件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
一、效果展示
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(“~/内容/bootstrap-fileinput/js")其中包括(, ,,,,~/内容/bootstrap-fileinput/js/fileinput.min.js",, ,,,,~/内容/bootstrap-fileinput/js/fileinput_locale_zh.js")),, ,bundles.Add (new StyleBundle(“~/内容/bootstrap-fileinput/css")其中包括(, ,,,,~/内容/bootstrap-fileinput/css/fileinput.min.css")),, @Scripts.Render(“~/内容/bootstrap-fileinput/js"), @Styles.Render(“~/内容/bootstrap-fileinput/css")
然后定义输入类型=& # 39;文件# 39;标签
& lt; form>, ,& lt; div 类=癿odal fade", id=癿yModal", tabindex=?“,角色=癲ialog", aria-labelledby=癿yModalLabel"祝辞, & lt;才能div 类=癿odal-dialog modal-lg",角色=癲ocument"祝辞, ,,& lt; div 类=癿odal-content"祝辞, ,,,& lt; div 类=癿odal-header"祝辞, ,,,,& lt; button 类型=癰utton",类=癱lose", data-dismiss=癿odal", aria-label=癱lose"祝辞& lt; span aria-hidden=皌rue"祝辞×& lt;/span> & lt;/button>, ,,,,& lt; h5 类=癿odal-title", id=癿yModalLabel"祝辞请选择Excel文件& lt;/h5>, ,,,& lt;/div>, ,,,& lt; div 类=癿odal-body"祝辞, ,,,,& lt; a href=https://www.yisu.com/zixun/皛/数据/ExcelTemplate/Order.xlsx”rel==氨淼タ丶?“外部nofollow”类下载导入模板>