ASP.NET Core MVC上传文件

使用模型绑定上传小文件

HTML代码：

 <form method="post" enctype="multipart/form-data" asp-controller="Main" asp-action="UploadFiles">
     <div class="form-group">
         <div class="col-md-10">
              <p>使用此表单上传一个或多个文件:</p>
              <input type="file" name="files" multiple>
         </div>
     </div>
 8     <div class="form-group">
         <div class="col-md-10">
              <input type="submit" value="上传">
         </div>
     </div>
13 </form>
 @ViewBag.Message

为支持文件上传，HTML 窗体必须指定 multipart/form-data 的 enctype

form表单的 enctype 属性规定了form表单数据在发送到服务器时候的编码方式

multipart/form-data：指定传输数据为二进制数据，例如图片、mp3、文件

multiple属性规定输入字段可选择多个值(支持批量上传)

上传到服务器的单个文件可使用 IFormFile 接口通过模型绑定进行访问，该接口定义如下：

 public interface IFormFile
 {
     string ContentType { get; }
     string ContentDisposition { get; }
     IHeaderDictionary Headers { get; }
     long Length { get; }
     string Name { get; }
     string FileName { get; }
     Stream OpenReadStream();
     void CopyTo(Stream target);
     Task CopyToAsync(Stream target, CancellationToken cancellationToken = null);
 }

注意：切勿依赖或信任未经验证的 FileName 属性。 FileName 属性应仅用于显示目的。

在控制器的构造函数中注入 IHostingEnvironment 来获取网站根目录路径：

上传方法：

 public IActionResult UploadFiles(List<IFormFile> files)
 {
     long size = ;//文件大小
     foreach (var file in files)
     {
         var fileName = file.FileName.Trim('"');//获取文件名
         fileName = _hostingEnv.WebRootPath + $@"\{fileName}";//指定文件上传的路径
         size += file.Length;
         using (FileStream fs = System.IO.File.Create(fileName))//创建文件流
         {
             file.CopyTo(fs);//将上载文件的内容复制到目标流
             fs.Flush();//清除此流的缓冲区并导致将任何缓冲数据写入
         }
     }
     ViewBag.Message = $"{files.Count}个文件 /{size}字节上传成功!";
     return View("Index");
17 }

使用 IFormFile 技术上传的文件在处理之前会缓存在内存中或 Web 服务器的磁盘中。 在操作方法中，IFormFile 内容可作为流访问。

运行结果：

在文件的根目录下可以看到上传的2文件：

上传成功！

以上上传功能使用表单提交，以下代码扩展使用Ajax请求提交

 HTML代码：

 <div class="row">
     <div class="form-group">
         <div class="col-md-10">
             <p>上传一个或多个文件:</p>
             <input type="file" id="files" name="files" multiple />
         </div>
     </div>
 </div>
 <div class="row">
     <div class="form-group">
         <div class="col-md-10">
             <input type="button" id="upload" class="btn btn-success" style="cursor:pointer;" value="上传" />
         </div>
     </div>
 </div>

JavaScript代码：

 $(function () {
      $("#upload").click(function () {
          var fileUpload = $("#files").get(0);//获得第一个files的名称和值
          var files = fileUpload.files;//获取文件信息
          var data = new FormData();//通过FormData构造函数创建一个空对象
          for (var i = 0; i < files.length; i++) {
              data.append(files[i].name, files[i]);//通过append方法追加数据
          }
          $.ajax({
              type: "post",
              url: "/Main/UploadFiles",
              contentType: false,//不要去设置Content-Type请求头
              processData: false,//不要去处理发送的数据
              data: data,
              success: function (data) {
                  alert(data.message);
              },
              error: function () {
                  alert("上传文件出现错误！");
              }
          });
     });
 })

上传方法：

 public IActionResult UploadFiles()
 {
    long size = ;//文件大小
    var files = Request.Form.Files;//获取前端传过来的文件
    foreach (var file in files)
    {
        var fileName = file.FileName.Trim('"');//获取文件名
        fileName = _hostingEnv.WebRootPath + $@"\{fileName}";//指定文件上传的路径
        size += file.Length;
        using (FileStream fs = System.IO.File.Create(fileName))//创建文件流
        {
            file.CopyTo(fs);//将上载文件的内容复制到目标流
            fs.Flush();//清除此流的缓冲区并导致将任何缓冲数据写入
        }
    }
    return Json(new { message = $"{files.Count}个文件 /{size}字节上传成功!" });
17 }

备注：如果文件上传的大小或频率会导致应用出现资源问题，请考虑使用流式处理上传文件。

End！