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 = 0;//文件大小
    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 = 0;//文件大小
   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！