MVC项目多文件列表管理及数据库提交实现方案咨询

没问题，我帮你一步步搞定这个功能！先梳理下你的需求：添加多个文件到列表展示、支持移除单个文件、点击保存把文件存入数据库，还想知道能不能用Ajax传递文件。咱们从前端到后端逐一解决：

一、前端代码完善（修复现有问题+新增功能） #

你的现有代码只处理了单个文件，而且没做移除功能，咱们先把这部分补全：

1. 维护文件集合与列表展示 #

首先得用一个全局数组来存用户添加的文件（因为<input type="file">的文件列表是只读的，没法直接修改），然后修改addToList函数支持多选文件：

<script type="text/javascript">
// 全局数组存选中的文件及对应附件名称
let uploadedFiles = [];

function addToList() {
    const attachmentName = $('#attach').val().trim();
    if (!attachmentName) {
        alert('请先填写附件名称');
        return;
    }
    
    const fileInput = $('#fileId')[0];
    const files = fileInput.files;
    if (files.length === 0) {
        alert('请选择要添加的文件');
        return;
    }
    
    const tableBody = $('#listTable tbody');
    // 遍历所有选中的文件，逐个添加到列表和数组
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        // 生成唯一ID，方便后续移除对应文件
        const uniqueFileId = `file-${Date.now()}-${i}`;
        
        // 把文件信息存到数组里
        uploadedFiles.push({
            id: uniqueFileId,
            attachmentName: attachmentName,
            file: file
        });
        
        // 往表格里加一行
        tableBody.append(`
            <tr class="child" style="text-align:center" data-file-id="${uniqueFileId}">
                <td>${attachmentName}</td>
                <td>${file.name}</td>
                <td><a href="#" class="remove-file">X</a></td>
            </tr>
        `);
    }
    
    // 清空文件输入框，方便再次选择新文件
    fileInput.value = '';
    // 清空附件名称输入框（可选，根据你的需求调整）
    $('#attach').val('');
}

// 绑定移除文件的点击事件
$(document).on('click', '.remove-file', function(e) {
    e.preventDefault();
    const row = $(this).closest('tr');
    const fileId = row.data('file-id');
    
    // 从数组里删掉对应文件
    uploadedFiles = uploadedFiles.filter(item => item.id !== fileId);
    // 删掉表格行
    row.remove();
});
</script>

2. 完善页面HTML结构 #

修复你现有HTML的语法错误，补上完整的表格和按钮：

<h2>Create</h2>
<div style="font-family:Arial">
    @using (Html.BeginForm("Create", "Attachment", null, FormMethod.Post, new { enctype = "multipart/form-data", id = "attachmentForm" }))
    {
        <div class="form-row">
            <div class="form-group col-md-4">
                <label for="inputCity">Attachment Name</label>
                @Html.TextBoxFor(modelItem => Model.AttachmentName, new { @class = "form-control", @id = "attach" })
            </div>
            <div class="form-group col-md-4">
                <label>Files</label>
                <input type="file" id="fileId" multiple />
            </div>
            <div class="form-group col-md-4">
                <label></label>
                <input type="button" class="btn btn-primary" onclick="addToList()" value="Add to List" />
            </div>
        </div>

        <!-- 文件列表表格 -->
        <div class="form-row mt-3">
            <div class="col-md-12">
                <table id="listTable" class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Attachment Name</th>
                            <th>File Name</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- 保存按钮：支持普通表单提交和Ajax提交 -->
        <div class="form-row mt-3">
            <div class="col-md-12">
                <input type="submit" class="btn btn-success" value="Save" />
                <button type="button" class="btn btn-success ml-2" id="ajaxSaveBtn">Save via Ajax</button>
            </div>
        </div>
    }
</div>

二、后端控制器处理（以ASP.NET MVC 5为例） #

如果是ASP.NET Core，把HttpPostedFileBase换成IFormFile就行，逻辑是一样的：

1. 先定义你的Attachment模型 #

public class Attachment
{
    public int Id { get; set; }
    public string AttachmentName { get; set; }
    public byte[] FileContent { get; set; } // 存文件字节到数据库
    public string FileName { get; set; }
    public string ContentType { get; set; }
}

2. 控制器的Action方法 #

public class AttachmentController : Controller
{
    private readonly YourDbContext _dbContext; // 替换成你的数据库上下文

    public AttachmentController(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // GET: 显示创建页面
    public ActionResult Create()
    {
        return View();
    }

    // POST: 普通表单提交保存文件
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(string attachmentName, IEnumerable<HttpPostedFileBase> files)
    {
        if (ModelState.IsValid && files != null && files.Any())
        {
            foreach (var file in files)
            {
                if (file != null && file.ContentLength > 0)
                {
                    // 把文件转成字节数组
                    byte[] fileBytes;
                    using (var memoryStream = new MemoryStream())
                    {
                        file.InputStream.CopyTo(memoryStream);
                        fileBytes = memoryStream.ToArray();
                    }

                    var newAttachment = new Attachment
                    {
                        AttachmentName = attachmentName,
                        FileContent = fileBytes,
                        FileName = file.FileName,
                        ContentType = file.ContentType
                    };

                    _dbContext.Attachments.Add(newAttachment);
                }
            }
            _dbContext.SaveChanges();
            return RedirectToAction("Index"); // 保存成功后跳转到列表页
        }

        return View(); // 验证失败返回创建页
    }

    // POST: Ajax提交保存文件
    [HttpPost]
    public JsonResult CreateViaAjax()
    {
        try
        {
            var attachmentName = Request.Form["attachmentName"];
            var uploadedFiles = Request.Files;

            if (string.IsNullOrEmpty(attachmentName) || uploadedFiles.Count == 0)
            {
                return Json(new { success = false, message = "请填写附件名称并选择文件" });
            }

            foreach (string fileKey in uploadedFiles)
            {
                var file = uploadedFiles[fileKey];
                if (file != null && file.ContentLength > 0)
                {
                    byte[] fileBytes;
                    using (var memoryStream = new MemoryStream())
                    {
                        file.InputStream.CopyTo(memoryStream);
                        fileBytes = memoryStream.ToArray();
                    }

                    var newAttachment = new Attachment
                    {
                        AttachmentName = attachmentName,
                        FileContent = fileBytes,
                        FileName = file.FileName,
                        ContentType = file.ContentType
                    };

                    _dbContext.Attachments.Add(newAttachment);
                }
            }
            _dbContext.SaveChanges();
            return Json(new { success = true, message = "文件保存成功！" });
        }
        catch (Exception ex)
        {
            return Json(new { success = false, message = $"保存失败：{ex.Message}" });
        }
    }
}

三、Ajax提交的实现（可选） #

如果你想用Ajax提交文件，需要用FormData来封装数据，在前端加这段代码：

$('#ajaxSaveBtn').click(function() {
    if (uploadedFiles.length === 0) {
        alert('请先添加文件到列表');
        return;
    }

    const formData = new FormData();
    // 这里假设所有文件用同一个附件名称，如果需要每个文件对应不同名称，要在uploadedFiles数组里存每个的名称，然后逐个添加
    formData.append('attachmentName', uploadedFiles[0].attachmentName);

    // 把数组里的文件都加到FormData里
    uploadedFiles.forEach(item => {
        formData.append('files', item.file);
    });

    // 发送Ajax请求
    $.ajax({
        url: '@Url.Action("CreateViaAjax", "Attachment")',
        type: 'POST',
        data: formData,
        processData: false, // 必须，不然jQuery会乱处理FormData
        contentType: false, // 必须，让浏览器自动设置正确的请求头
        success: function(response) {
            if (response.success) {
                alert(response.message);
                // 清空列表和数组
                uploadedFiles = [];
                $('#listTable tbody').empty();
            } else {
                alert(response.message);
            }
        },
        error: function() {
            alert('提交失败，请稍后重试');
        }
    });
});

几个关键注意点 #

1. 表单必须加enctype="multipart/form-data"：不管是普通提交还是Ajax，没有这个属性就传不了文件。
2. 文件存储建议：如果是大文件（比如超过10MB），不建议直接存字节数组到数据库，最好把文件存在服务器目录，然后数据库存文件路径。
3. Ajax提交的特殊设置：processData和contentType必须设为false，否则FormData会被错误处理。

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