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

程序员文章站 2024-02-02 15:42:34

网站中的上传相信大家都不陌生，也算是一个小小的技术难点，尤其时在asp.net中，上传的一些大小限制以及上传的进度的控制，以及用户体验等方面，今天在这里分享一个在asp.n...

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

它来自一个开源项目 git：

文档地址：

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

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

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

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

使用方式：

1.nuget:install-package bootstrap-fileinput

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

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

下载地址：【中文是zh.js】

文档结构：

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

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

maxfilepreviewsize: 25600, // 25 mb 默认是25m，根据需要手动调整

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

@{
  layout = null;
}
<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>index</title>
  <script src="~/scripts/jquery-1.9.1.js"></script>
  <script src="~/scripts/bootstrap.js"></script>
  <link href="~/content/bootstrap.css" rel="external nofollow" rel="stylesheet" />
  <script src="~/scripts/fileinput.js"></script>
  <script src="~/scripts/fileinput_locale_zh.js"></script>
  <link href="~/content/bootstrap-fileinput/css/fileinput.css" rel="external nofollow" rel="stylesheet" />
  <script type="text/javascript">
    $(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: "<i class='glyphicon glyphicon-king'></i>",
        msgfilestoomany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
      });
      //导入文件上传完成之后的事件
      $("#txt_file").on("fileuploaded", function (event, data, previewid, index) {
      });
    });
  </script>
</head>
<body>
  <div> 
    <form>
      <div>
        <div class="modal-header">
          <h4 class="modal-title" id="mymodallabel">[请选择xml/docx]文件</h4>
        </div>
        <div class="modal-body">
          <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
        </div>
      </div>
    </form>
  </div>
</body>
</html>

后台：

using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.mvc;
using system.io;
using system.xml;
using system.xml.schema;
namespace uploadtest.controllers
{
  public class homecontroller : controller
  {
    //
    // get: /home/
    public actionresult index()
    {
      return view();
    }
    public jsonresult uploadfile()
    {
      uploadresult result = new uploadresult();
      var ofile = request.files["txt_file"];
      result.filename = ofile.filename;
      stream sm = ofile.inputstream;
      byte[] bt= new byte[sm.length];
      sm.read(bt, 0, (int)sm.length);
      filestream fs = new filestream(appdomain.currentdomain.basedirectory+ofile.filename,filemode.create);
      fs.write(bt, 0, bt.length);
      fs.close();
      fs.dispose();
      sm.close();
      sm.dispose();
      return json(result, jsonrequestbehavior.allowget);
    }
    public class uploadresult
    {
      public string filename { get; set; }
      public string error { get; set; }
    }
  }
}

为了在前台正确的显示文件的错误信息，需要给前台返回一个带有error字段的json，其中error字段时必须的，否则无法显示后台回写的错误消息【这时必须的，官方文档中明确指出】

后台可以做到更细致的控制，并且支持多线程上传

上一篇：解决request请求流只能读取一次的问题

下一篇：安徽广播影视职业技术学院2022年在专科院校中的排名

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