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

这篇文章主要为大家展示了“MVC如何实现文件上传支持批量上传拖拽及预览文件内容校验功能”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“MVC如何实现文件上传支持批量上传拖拽及预览文件内容校验功能”这篇文章吧。

网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在asp.net中，上传的一些大小限制以及上传的进度的控制，以及用户体验等方面，今天在这里分享一个在asp.net mvc模式下的文件上传，同样适用于其它web类型bootstrap-fileinput .

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

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

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

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

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

使用方式：

1.nuget:Install-Package bootstrap-fileinput

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

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

文档结构：

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

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

示例：前台  --代码中的注释已经足够解释各配置项的作用，就不赘述了.

@{
  Layout = null;
}



  
  
  
  
  
  
  
  
  
    $(function () {
      var control = $("#txt_file");
      var uploadrul = "/Home/UploadFile";
      control.fileinput({
        language: 'zh', //设置语言
        uploadUrl: uploadrul, //上传的地址
        allowedFileExtensions: ['xml','docx'],//接收的文件后缀
        showUpload: true, //显示批量上传按钮
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式   
        dropZoneEnabled: true,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的较大宽度
        //maxImageHeight: 1000,//图片的较大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        maxFileCount: 100,
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的较大数值{m}！",
      });
      //导入文件上传完成之后的事件
      $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
      });
    });
  


  
 
    

      

        
          [请选择xml/docx]文件