怎么在引导中使用fileinput上传插件

  

这篇文章将为大家详细讲解有关怎么在bootstrap中使用fileinput 上传插件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

一、效果展示

 1、原始的input type='file'

怎么在bootstrap中使用fileinput 上传插件

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

怎么在bootstrap中使用fileinput 上传插件

怎么在bootstrap中使用fileinput 上传插件

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

怎么在bootstrap中使用fileinput 上传插件

怎么在bootstrap中使用fileinput 上传插件

拖拽上传

怎么在bootstrap中使用fileinput 上传插件

上传中

怎么在bootstrap中使用fileinput 上传插件

怎么在bootstrap中使用fileinput 上传插件

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

怎么在bootstrap中使用fileinput 上传插件

上传中

怎么在bootstrap中使用fileinput 上传插件

上传完成后

怎么在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”类下载导入模板