ASP.NET Core MVC分批多文件上传功能实现及代码求助

前端实现（视图+JS） #

视图代码（Razor） #

在MVC视图中添加以下代码，包含表单字段、文件选择触发按钮和已选文件列表：

<form id="uploadForm" asp-action="SaveFiles" asp-controller="FileUpload" method="post" enctype="multipart/form-data">
    <!-- 普通表单字段示例 -->
    <div class="form-group">
        <label>表单标题</label>
        <input type="text" name="Title" class="form-control" required />
    </div>
    <div class="form-group">
        <label>表单描述</label>
        <textarea name="Description" class="form-control"></textarea>
    </div>

    <!-- 文件选择区域 -->
    <div class="form-group">
        <button type="button" id="addFilesBtn" class="btn btn-primary">添加文件</button>
        <!-- 隐藏的文件选择控件，支持多选 -->
        <input type="file" id="fileInput" multiple style="display:none;" />
    </div>

    <!-- 已选文件列表 -->
    <div class="form-group">
        <label>已选文件:</label>
        <ul id="fileList" class="list-group"></ul>
    </div>

    <button type="submit" class="btn btn-success">提交表单</button>
</form>

JavaScript 代码 #

添加以下逻辑实现多批次选文件、文件列表展示和表单提交：

// 存储所有选中的文件
let selectedFiles = [];

// 触发文件选择对话框
document.getElementById('addFilesBtn').addEventListener('click', function() {
    document.getElementById('fileInput').click();
});

// 处理文件选择事件
document.getElementById('fileInput').addEventListener('change', function(e) {
    const files = Array.from(e.target.files);
    // 累加新选择的文件
    selectedFiles = [...selectedFiles, ...files];
    // 更新文件列表显示
    updateFileList();
});

// 更新已选文件列表
function updateFileList() {
    const fileList = document.getElementById('fileList');
    fileList.innerHTML = '';
    
    selectedFiles.forEach((file, index) => {
        const listItem = document.createElement('li');
        listItem.className = 'list-group-item d-flex justify-content-between align-items-center';
        listItem.innerHTML = `
            ${file.name}
            <button type="button" class="btn btn-sm btn-danger" onclick="removeFile(${index})">删除</button>
        `;
        fileList.appendChild(listItem);
    });
}

// 删除指定索引的文件
function removeFile(index) {
    selectedFiles.splice(index, 1);
    updateFileList();
}

// 表单提交时汇总文件并发送请求
document.getElementById('uploadForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    // 移除默认的fileInput文件，改用全局数组中的文件
    formData.delete('fileInput');
    
    // 将所有选中的文件添加到FormData
    selectedFiles.forEach(file => {
        formData.append('Files', file);
    });
    
    // 发送AJAX请求
    fetch(this.action, {
        method: this.method,
        body: formData
    })
    .then(response => {
        if (response.ok) {
            alert('提交成功');
            // 重置表单和文件列表
            selectedFiles = [];
            this.reset();
            updateFileList();
        } else {
            alert('提交失败');
        }
    })
    .catch(error => {
        console.error('提交出错:', error);
        alert('提交出错，请重试');
    });
});

后端实现（C#） #

模型类 #

创建用于接收表单数据和文件的模型：

public class UploadViewModel
{
    // 普通表单字段
    public string Title { get; set; }
    public string Description { get; set; }
    
    // 接收所有上传的文件
    public IEnumerable<IFormFile> Files { get; set; }
}

控制器代码 #

创建控制器处理文件上传和表单数据保存：

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Http;
using System.IO;

public class FileUploadController : Controller
{
    // 显示上传页面
    public IActionResult Index()
    {
        return View();
    }

    // 处理表单提交
    [HttpPost]
    public async Task<IActionResult> SaveFiles(UploadViewModel model)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest("表单数据无效");
        }

        // 示例：保存表单数据到数据库（需自行实现数据库操作）
        // _dbContext.UploadRecords.Add(new UploadRecord { Title = model.Title, Description = model.Description });
        // await _dbContext.SaveChangesAsync();

        // 保存上传的文件
        var uploadPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "uploads");
        if (!Directory.Exists(uploadPath))
        {
            Directory.CreateDirectory(uploadPath);
        }

        foreach (var file in model.Files)
        {
            if (file.Length > 0)
            {
                // 可选：添加GUID避免文件名重复
                var safeFileName = $"{Guid.NewGuid()}_{Path.GetFileName(file.FileName)}";
                var filePath = Path.Combine(uploadPath, safeFileName);

                using (var stream = new FileStream(filePath, FileMode.Create))
                {
                    await file.CopyToAsync(stream);
                }
            }
        }

        return Ok("文件和表单数据保存成功");
    }
}

注意事项 #

• 确保在Program.cs（.NET 6+）或Startup.cs（.NET 5及以前）中配置静态文件服务：

  // .NET 6+ Program.cs
  app.UseStaticFiles();
  

• 可在前端或后端添加文件大小、类型的验证逻辑，比如限制单文件大小不超过10MB，仅允许上传图片、文档等特定类型。

内容的提问来源于stack exchange，提问作者Marmara