本文详解在统一表单处理逻辑中正确读取 `` 元素的文件对象，并通过 `formdata` 实现多类型字段（文本、下拉、文件）的混合提交，避免 `value is undefined` 和 `illegal invocation` 错误。
在使用 jQuery 统一处理多个相似表单时，开发者常通过 .form-value 类批量采集字段值。然而，当遇到 时，直接访问 .value 属性会返回 undefined —— 因为文件输入元素本身不暴露 value 字符串（出于安全限制），其真实数据封装在 files FileList 对象中。错误地尝试 $(this)[0].files[0].value 或 $(this).val() 均无法获取有效文件引用，而仅取 $(this)[0].files[0]（即原生 File 对象）才是正确起点。
以下为优化后的完整处理方案：
✅ 正确读取文件对象并构建 FormData
$("#save_form").click(function(event) {
event.preventDefault();
// 使用原生 FormData，天然支持文件 + 文本混合提交
const formData = new FormData();
$('.form-value').each(function() {
const $el = $(this);
const id = $el.attr('id');
let value;
if ($el.is('select')) {
value = $el.find('option:selected').val();
} else if ($el.is(':file')) {
const file = this.files[0]; // ✅ 关键：直接取原生 File 对象，无需 .value
if (file) {
formData.append(id, file); // 自动使用文件名作为 filename
}
return; // 文件已单独 append，跳过后续 formData[id] = value 赋值
} else {
value = $el.val();
}
// 普通字段：key-value 形式追加
formData.append(id, value);
});
// 发送请求（必须配置关键选项！）
$.ajax({
url: '/api/submit',
type: 'POST',
data: formData,
processData: false, // ✅ 禁用 jQuery 自动序列化（否则会破坏 FormData 结构）
contentType: false, // ✅ 禁用手动设置 Content-Type，让浏览器自动设为 multipart/form-data
success: function(res) {
console.log('提交成功:', res);
},
error: function(xhr) {
console.error('提交失败:', xhr.responseJSON);
}
});
});⚠️ 关键注意事项
- 不要用 $(this)[0].files[0].value：File 对象无 value 属性，该写法必返回 undefined；
- 不要用 $(this).val() 获取文件：jQuery 的 .val() 对 file input 返回空字符串或 undefined，不可靠；
- 必须使用 processData: false 和 contentType: false：若遗漏任一选项，jQuery 会尝试将 FormData 转为字符串（导致 Illegal invocation）或错误设置 Content-Type（服务端无法解析 multipart 数据）；
- 文件为空时需校验：this.files[0] 在未选文件时为 undefined，应显式判断，避免 formData.append(id, undefined)；
- 如需多文件支持：可遍历 this.files（FileList），对每个 file 调用 formData.append(id, file, file.name)。
? 补充建议
- 若需兼容旧版 IE（
- 对大文件上传，建议添加 xhr.upload.onprogress 实现进度条；
- 后端接收时，注意区分普通字段（req.body）与文件字段（req.files，如 Express + multer）。
通过以上方式，即可在统一表单处理器中稳健支持文本、下拉及文件字段，真正实现“一套逻辑，多表单复用”。
