如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

  介绍

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!


它来自一个开源项目github.com/kartik-v/bootstrap-fileinput/

文档地址:plugins.krajee.com/file-input

用一个下午的时间将文档通读了一次,并且做了根据文档指示做出了一个小型的演示,效果出奇的好,如下是效果图:

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

可以对文件预览筛选,从客户端就过滤一些不适用的文件,而且界面效果还特别美观

如下是使用方式:或者直接参照代码写就可以

使用方式:

1。nuget:安装包bootstrap-fileinput

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

2。语言本地化{下载fileinput_locale_zh.js}或者修改Fileinput中的本地化词汇

下载地址:github.com/kartik-v/bootstrap-fileinput/tree/master/js/locales,【中文是zh型。js】

文档结构:

如何实现MVC文件上传支持批量上传拖拽及预览文件内容校验功能

3。文件大小限制:修改fileinput。js中3195年的行maxFilePreviewSize配置节点

maxFilePreviewSize: 25600//25 MB,默认是25米,根据需要手动调整

示例:前台,——代码中的注释已经足够解释各配置项的作用,就不赘述了。

 @ {
  布局=零;
  }
  & lt; !DOCTYPE html>
  & lt; html>
  & lt; head>
  & lt;元名称=皏iewport"内容=翱矶?device-width"/比;
  & lt; title> Index
  & lt;脚本src=https://www.yisu.com/zixun/" ~/脚本/jquery-1.9.1.js ">