架构师_程序员

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 44|回复: 0

[.NET Core] .net core bootstrap-fileinput上传文件

[复制链接]
发表于 2020-2-13 18:01:14
zu
534372-20170720101555880-1710584086.png
      js:插件核心js代码,引用fileinput.min.js/fileinput.js即可,默认插件语言为英文,如需要中文需要引用js/locales/zh.js(其他语言引用相应的js文件)

  js/plugins:相关辅助插件,piexif.min.js(resize image插件)、sortable.js(初始化预览窗口缩略图排序插件)、purify.js(看说明是净化html代码用的,试了下没有搞明白具体有说明作用)

  css:插件核心css代码,fileinput.min.css/fileinput.css(核心css代码,引用任何一个)、fileinput-rtl.min.css/fileinput-rtl.css(选用这组css,文件选择框会和从右向左排列,即选择文件等相关按钮按钮在左边,文件框在右边)

  themes:主题,如需要插件主题样式可引用主题文件夹下的相应js和css文件

  查看示例:

    打开压缩包中的example/index.html或者访问http://plugins.krajee.com/file-basic-usage-demo查看示例。可根据示例的代码选择需要的控件代码使用。

2、代码引用

  需要引用jquery

  需要结合bootstrap使用,即页面需要引入bootstrap相关js和css文件

  引用fileinput.js 和css

  中文需要引用js/locales/zh.js

  需要主题样式时引用themes下相关文件夹中的js和css

  tips:最好以上按顺序引用,免得出现莫名其妙的问题,比如zh.js必须在fileinput.js后引用否则无效

二、使用示例

视图添加:
  1. <script src="~/lib/jquery/dist/jquery.min.js"></script>
  2. <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  3. <script src="~/js/site.js" asp-append-version="true"></script>
  4. <script src="~/js/fileinput.min.js"></script>
  5. <script src="~/js/zh.js"></script>
  6. <script type="text/javascript">
  7.     $(function () {
  8.         var control = $("#txt_file");
  9.         var uploadrul = "/User/UploadFile";
  10.         control.fileinput({
  11.             language: 'zh', //设置语言
  12.             uploadUrl: uploadrul, //上传的地址
  13.             allowedFileExtensions: ['png'],//接收的文件后缀
  14.             showUpload: true, //显示批量上传按钮
  15.             showCaption: false,//是否显示标题
  16.             browseClass: "btn btn-primary", //按钮样式
  17.             dropZoneEnabled: true,//是否显示拖拽区域
  18.             //minImageWidth: 50, //图片的最小宽度
  19.             //minImageHeight: 50,//图片的最小高度
  20.             //maxImageWidth: 1000,//图片的最大宽度
  21.             //maxImageHeight: 1000,//图片的最大高度
  22.             //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
  23.             //minFileCount: 0,
  24.             maxFileCount: 100,
  25.             enctype: 'multipart/form-data',
  26.             validateInitialCount: true,
  27.             previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

  28.             msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
  29.         });
  30.         //导入文件上传完成之后的事件
  31.         $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
  32.         });
  33.     });
  34. </script>

  35. <div>
  36.     <form>
  37.         <div>
  38.             <div class="modal-header">
  39.                 <h4 class="modal-title" id="myModalLabel">请选择xml文件</h4>
  40.             </div>
  41.             <div class="modal-body">
  42.                 <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
  43.             </div>
  44.         </div>
  45.     </form>
  46. </div>
复制代码
控制器添加:
  1. public JsonResult UploadFile()
  2.         {
  3.             uploadResult result = new uploadResult();
  4.             try
  5.             {
  6.                 var oFile = Request.Form.Files["txt_file"];
  7.                 Stream sm = oFile.OpenReadStream();
  8.                 result.fileName = oFile.FileName;
  9.                 if (!Directory.Exists(AppContext.BaseDirectory + "/Image/"))
  10.                 {
  11.                     Directory.CreateDirectory(AppContext.BaseDirectory + "/Image/");
  12.                 }
  13.                 string filename = AppContext.BaseDirectory + "/Image/" + DateTime.Now.ToString("yyyymmddhhMMssss") + Guid.NewGuid().ToString() + ".png";
  14.                 FileStream fs = new FileStream(filename, FileMode.Create);
  15.                 byte[] buffer = new byte[sm.Length];
  16.                 sm.Read(buffer, 0, buffer.Length);
  17.                 fs.Write(buffer, 0, buffer.Length);
  18.                 fs.Dispose();
  19.             }
  20.             catch (Exception ex)
  21.             {
  22.                 result.error = ex.Message;
  23.             }
  24.             return Json(result);
  25.         }
  26.         public class uploadResult
  27.         {
  28.             public string fileName { get; set; }
  29.             public string error { get; set; }
  30.         }
复制代码






上一篇:对一个或多个实体的验证失败。有关详细信息...
下一篇:SQLyog-12.0.9-0含注册码
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|Archiver|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2020-2-21 01:33

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表