ASP.NET MVC多文件上传异常：服务器端文件名为空问题解决

你遇到的核心问题出在客户端的文件处理逻辑上：浏览器出于安全策略，完全禁止通过JavaScript直接给<input type="file">的value属性赋值File对象。你动态生成的那些file_*输入框，只是渲染了预览图，并没有真正关联到用户选择的原始文件——表单提交时这些输入框根本没携带任何文件数据，所以服务器端拿到的只是空的文件对象（只有对象壳子，没有实际内容）。

我给你提供两种可行的修复方案，你可以根据需求选择：

方案一：用FormData提交（推荐，支持动态删除文件） #

不需要生成额外的<input type="file">，直接收集用户选择的File对象，用FormData构建表单数据提交，确保文件能正确传递到服务器。

步骤1：修改客户端JS逻辑 #

// 全局存储用户选择的文件
let selectedFiles = [];

function readFile(input) {
    if (input.files && input.files.length > 0) {
        // 清空之前的选择（如果需要保留多次选择可以删除这两行）
        selectedFiles = [];
        $('#imgZone .dz-preview').remove();
        
        let inputID = 0;
        for (var i = 0; i < input.files.length; i++) {
            const file = input.files[i];
            selectedFiles.push(file); // 保存文件到数组
            
            const reader = new FileReader();
            reader.onload = (function (f) {
                return function (e) {
                    const img = `
                        <div class="dz-preview dz-processing dz-error dz-complete dz-image-preview">
                            <div class="dz-image shadow">
                                <img data-dz-thumbnail="" class="w-100 h-100" alt="${f.name}" src="${e.target.result}">
                            </div>
                            <div class="dz-details">
                                <div class="dz-size"><span data-dz-size="">${formatBytes(f.size)}</span></div>
                                <div class="dz-filename"><span data-dz-name="">${f.name}</span></div>
                                <div class="mt-1 btn btn-danger btn-delete" data-index="${inputID}"><i class="fas fa-trash"></i></div>
                            </div>
                        </div>
                    `;
                    $('#imgZone').append(img);
                    inputID++;
                }
            })(file);
            reader.readAsDataURL(file);
        }
        // 启用提交和清空按钮
        $('#add, #delete').removeClass('disabled');
    }
}

// 添加单个文件删除逻辑
$('#imgZone').on('click', '.btn-delete', function() {
    const index = $(this).data('index');
    selectedFiles.splice(index, 1); // 从数组移除对应文件
    $(this).closest('.dz-preview').remove();
    // 没有文件时禁用按钮
    if (selectedFiles.length === 0) {
        $('#add, #delete').addClass('disabled');
    }
});

// 修改提交函数，用FormData发送
function Send() {
    if (selectedFiles.length === 0) return;
    
    const formData = new FormData();
    // 添加表单其他字段
    formData.append('id_client', $('#id_client').val());
    // 添加所有文件，name对应服务器接收的参数
    selectedFiles.forEach((file, index) => {
        formData.append(`files[${index}]`, file);
    });
    
    $.ajax({
        url: '/Client/EditImage',
        type: 'POST',
        data: formData,
        processData: false, // 必须：禁止jQuery处理FormData
        contentType: false, // 必须：让浏览器自动设置正确的Content-Type
        success: function() {
            window.location.href = `/Client/ViewImage?id=${$('#id_client').val()}&camBack=false`;
        },
        error: function() {
            alert('文件上传失败，请重试');
        }
    });
}

// 清空选择的函数
function Clear() {
    selectedFiles = [];
    $('#files').val('');
    $('#imgZone .dz-preview').remove();
    $('#add, #delete').addClass('disabled');
}

步骤2：修改服务器端代码 #

public ActionResult EditImage(long? id_client) {
    if (!id_client.HasValue)
        return RedirectToAction("Detail", new { id = id_client });
    
    var files = Request.Files;
    if (files.Count == 0)
        return RedirectToAction("Detail", new { id = id_client });
    
    // 遍历处理所有文件
    foreach (string fileKey in files) {
        HttpPostedFileBase file = files[fileKey];
        if (file != null && file.ContentLength > 0) {
            FileUpload(id_client, "~\\Documents\\Client\\boards\\", new[] { file });
        }
    }
    
    return RedirectToAction("ViewImage", new { id = id_client, camBack = false });
}

方案二：直接使用原始多文件输入框（更简单） #

如果不需要动态删除单个文件的功能，直接把原始的多文件选择框放到表单内部，表单提交时会自动携带所有文件，不需要额外的JS处理。

步骤1：修改HTML代码 #

@using (Html.BeginForm("EditImage", "Client", FormMethod.Post, new { enctype = "multipart/form-data" })) {
    <input type="hidden" id="id_client" name="id_client" value="@ViewBag.Client" />
    <div class="row">
        <div class="col-md-12">
            <!-- 把文件选择框放到表单里，隐藏它 -->
            <input type="file" name="files" id="files" onchange="readFile(this)" multiple accept="image/png, image/jpeg, image/jpg" capture class="d-none" />
            <div class="dropzone dz-clickable" onclick="document.getElementById('files').click()" id="imgZone">
                <div class="dz-default dz-message"><span>Click Here to choose file</span></div>
            </div>
        </div>
        <div class="col-md-12">
            <br />
            <div class="row">
                <div class="col-md-6"><p class="btn btn-danger btn-lg disabled btn-block" id="delete" onclick="Clear()">Clear</p></div>
                <div class="col-md-6"><button type="submit" name="add" id="add" class="btn btn-success btn-lg disabled btn-block">Submit</button></div>
            </div>
        </div>
    </div>
}

步骤2：简化客户端JS逻辑 #

function readFile(input) {
    if (input.files && input.files.length > 0) {
        $('#imgZone .dz-preview').remove();
        
        for (var i = 0; i < input.files.length; i++) {
            const file = input.files[i];
            const reader = new FileReader();
            reader.onload = (function (f) {
                return function (e) {
                    const img = `
                        <div class="dz-preview dz-processing dz-error dz-complete dz-image-preview">
                            <div class="dz-image shadow">
                                <img data-dz-thumbnail="" class="w-100 h-100" alt="${f.name}" src="${e.target.result}">
                            </div>
                            <div class="dz-details">
                                <div class="dz-size"><span data-dz-size="">${formatBytes(f.size)}</span></div>
                                <div class="dz-filename"><span data-dz-name="">${f.name}</span></div>
                            </div>
                        </div>
                    `;
                    $('#imgZone').append(img);
                }
            })(file);
            reader.readAsDataURL(file);
        }
        $('#add, #delete').removeClass('disabled');
    }
}

function Clear() {
    $('#files').val('');
    $('#imgZone .dz-preview').remove();
    $('#add, #delete').addClass('disabled');
}

步骤3：修改服务器端代码 #

public ActionResult EditImage(long? id_client, IEnumerable<HttpPostedFileBase> files) {
    if (!id_client.HasValue)
        return RedirectToAction("Detail", new { id = id_client });
    
    if (files == null || !files.Any())
        return RedirectToAction("Detail", new { id = id_client });
    
    FileUpload(id_client, "~\\Documents\\Client\\boards\\", files.ToArray());
    
    return RedirectToAction("ViewImage", new { id = id_client, camBack = false });
}

1. 表单必须设置enctype="multipart/form-data"，你已经正确配置了这一点。
2. 用AJAX提交时，必须设置processData: false和contentType: false，否则jQuery会破坏FormData的结构，导致文件无法传递。
3. 永远不要尝试通过JS修改<input type="file">的value属性——浏览器的安全机制完全禁止这种操作，这也是你最初遇到问题的核心原因。

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