jQuery点击事件中File值为undefined，如何正确附加文件到FormData？

问题根源 #

你现在的错误有两个核心原因：

1. 用普通JS对象{}存储包含文件的表单数据，File对象无法被正确序列化，直接赋值会触发Illegal invocation错误
2. 获取文件时错误使用了.value属性，File对象没有这个属性，所以返回undefined

正确实现代码 #

直接使用原生FormData对象处理表单数据，它是专门用于封装表单（含文件）数据的API：

$("#save_form").click(function(event){
    event.preventDefault();

    // 初始化原生FormData对象，而非普通JS对象
    var formData = new FormData();

    $('.form-value').each(function() {
        var id = $(this).attr('id');
        
        if ($(this).is(':file')) {
            // 文件字段：直接获取File对象，若允许多文件可循环files数组
            var file = $(this)[0].files[0];
            if (file) {
                formData.append(id, file);
            }
        } else {
            // 普通输入/选择框：$(this).val()已能正确获取选中值（包括select）
            var value = $(this).val();
            formData.append(id, value);
        }
    });

    // 测试输出：FormData无法直接用console.log查看，需遍历
    for (let [key, value] of formData.entries()) {
        console.log(key, value);
    }

    // 后续发送请求示例（以jQuery ajax为例）：
    // $.ajax({
    //   url: '/your-api-url',
    //   type: 'POST',
    //   data: formData,
    //   processData: false, // 必须设置为false，禁止jQuery处理FormData
    //   contentType: false, // 必须设置为false，让浏览器自动设置正确的请求头
    //   success: function(res) {
    //     console.log(res);
    //   }
    // });
});

关键说明 #

• FormData的必要性：普通JS对象无法处理File类型的数据，只有原生FormData能正确封装文件并支持后续HTTP文件上传
• 文件获取方式：$(this)[0].files[0]是获取单个文件的正确方式，若开启多文件上传（multiple属性），需循环files数组逐个append
• 简化select处理：$(this).val()对select元素已能直接返回选中选项的value，无需额外查找option:selected
• 请求配置注意：用jQuery发送带文件的请求时，必须设置processData: false和contentType: false，避免jQuery破坏FormData结构

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