通过Ajax向Controller传文件问题：Tabulator无表单场景接收为空

我帮你梳理下核心问题，主要出在FormData的构建逻辑和Ajax数据传递方式上，咱们一步步修正：

问题分析 #

1. Ajax数据传递错误：你把FormData包装成了{ files: form }对象传递，这会导致后端无法正确解析文件流——FormData本身就是要直接作为请求体发送的，不能嵌套到普通对象里。
2. 参数名不匹配：后端接收的参数是List<IFormFile> files，但你前端FormData里append的键是'Image'，键名不一致导致后端无法映射到对应的参数。
3. 重复ID隐患：动态创建的input用了固定IDget_anexo，如果同时编辑多个Tabulator单元格，会出现ID重复，导致获取文件出错。

修改后的JavaScript代码 #

var imagem_insert = function (cell, onRendered, success, cancel) { 
    var editor = document.createElement("input"); 
    editor.setAttribute("type", "file");
    // 去掉固定ID，避免重复问题
    var send = document.createElement("button"); 
    var row_stamp = cell.getRow().getData().u_listamat; 
    let selectedFile;

    function successFuncEditor() { 
        send.click(); 
    } 
    editor.addEventListener("change", successFuncEditor); 

    function successFuncSend() { 
        // 直接从editor获取文件，不用getElementById
        selectedFile = editor.files[0]; 
        console.log(selectedFile); 

        const file_name = selectedFile.name; 
        const file_size = selectedFile.size; 
        const file_type = selectedFile.type; 

        let form = new FormData; 
        // 键名改为files，和后端参数名对应
        form.append('files', selectedFile); 
        form.append('Name', file_name); 
        form.append('size', file_size); 
        form.append('tipo', file_type); 

        console.log(form.get("Name")); 

        $.ajax({ 
            type: "POST", 
            processData: false, 
            contentType: false, 
            url: "/Lista/Insert", 
            datatype: 'json', 
            // 直接传递form，不要嵌套对象
            data: form, 
            success: function (data) { 
                // 这里可以添加成功后的逻辑，比如关闭编辑器
                success();
            },
            error: function(xhr){
                // 处理错误，比如取消编辑
                cancel();
                console.error(xhr.responseText);
            }
        }) 
    } 
    send.addEventListener("click", successFuncSend) 

    //return the editor element 
    return editor; 
}

后端Controller优化（可选但推荐） #

可以给参数加上[FromForm]标签，明确指定从表单数据中绑定，避免潜在的解析问题：

[HttpPost] 
public ActionResult Insert([FromForm]List<IFormFile> files) { 
    byte[] arq = null; 
    string nome_ficheiro = null; 
    foreach (var file in files) { 
        using (BinaryReader reader = new BinaryReader(file.OpenReadStream())) { 
            arq = reader.ReadBytes((int)file.Length); 
            nome_ficheiro = file.FileName; 
        } 
    } 
    return View(); 
}

关键修改点说明 #

• 移除了input的固定ID，直接通过editor.files[0]获取选中的文件，避免多单元格编辑时的ID冲突。
• FormData中文件的键名改为files，和后端参数名完全匹配。
• Ajax的data直接传递FormData对象，不再嵌套到{ files: form }中。
• 补充了success和cancel的调用，确保Tabulator的编辑流程正常收尾。

这样修改后，后端应该就能正确接收到文件列表了。

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