如何使用jQuery将多个文件追加到FormData中实现多文件上传

嗨，我看到你的问题了——你已经在前端尝试把多个文件加到FormData里，但后端只处理了单个文件，这就是为什么只有第一个文件能保存的原因。咱们来调整一下代码，让多文件上传正常工作：

前端代码调整（小优化，核心逻辑没问题） #

你的前端代码里，用data.append("file", program)多次追加文件的逻辑是正确的——FormData允许同一个key重复append，后端会识别为文件集合。这里做几个小优化让代码更健壮：

$(document).on('click', '.btnSubmit', function () {
    var data = new FormData();
    // 明确选中带multiple属性的文件输入框
    var fileInput = $('input[type="file"][multiple]')[0];
    var files = fileInput.files;
    
    if (files.length > 0) {
        // 用原生forEach替代underscore，兼容性更好
        Array.from(files).forEach(function(file) {
            // 保持同一个key "file"，后端才能识别为多文件集合
            data.append("file", file);
        });
    }

    _appFun._ajaxcall({
        type: "POST",
        url: '/application/test/saveFiles',
        // 删掉重复的type配置
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            alert('所有文件上传成功！');
        },
        error: function() {
            alert('上传失败，请重试');
        }
    });
});

后端C#代码修改（关键修复） #

原来的代码只获取了单个Request.Files["file"]，但实际上Request.Files是一个包含所有上传文件的集合，我们需要遍历它来保存每个文件：

[HttpPost]
public ActionResult saveFiles()
{
    string directory = AppSettings.Application.uploadFolder;
    // 先确保上传目录存在，避免保存时抛出异常
    if (!Directory.Exists(directory))
    {
        Directory.CreateDirectory(directory);
    }

    // 遍历所有上传的文件
    foreach (string fileKey in Request.Files)
    {
        HttpPostedFileBase file = Request.Files[fileKey];
        if (file != null && file.ContentLength > 0)
        {
            var originalFileName = Path.GetFileNameWithoutExtension(file.FileName);
            string extension = Path.GetExtension(file.FileName);
            // 如果uniqId()未实现，可用Guid生成唯一标识避免文件名重复
            var randomId = uniqId(); 
            var saveFileName = $"{originalFileName}{randomId}{extension}";
            var savePath = Path.Combine(directory, saveFileName);
            
            file.SaveAs(savePath);
        }
    }

    return RedirectToAction("Index");
}

额外注意事项 #

• 确保服务器的上传目录有写入权限，否则文件会保存失败。
• 如果你的uniqId()方法还没实现，可以用Guid.NewGuid().ToString()来生成唯一标识，防止同名文件覆盖。
• 前端可以添加文件大小、类型校验（比如限制单文件不超过10MB，只允许图片/PDF等），提升用户体验。

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