如何在 jQuery 通用表单提交中正确获取并上传文件字段

本文详解 jquery 中通过 `.files[0]` 正确读取 `` 文件对象的方法，并说明使用 `formdata` 提交时必须设置 `processdata: false` 和 `contenttype: false`，避免“undefined”或“illegal invocation”错误。

在构建多表单共用的统一提交逻辑时（例如所有表单元素均带有 .form-value 类），开发者常试图将各类输入值统一收集为一个 JavaScript 对象（如 formData = {}）。然而，当遇到 元素时，若沿用 $(this)[0].files[0].value 的写法，会得到 undefined —— 因为 File 对象本身没有 value 属性；而若直接取 $(this)[0].files[0] 后又将其混入普通字符串键值对中（如 formData[id] = fileObj），则在后续 jsON 序列化或 ajax 发送时极易触发 Illegal invocation 错误（因 File 对象方法绑定于原始 dom 上下文）。

✅ 正确做法是：单独处理文件字段，使用原生 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') && $el[0].files.length > 0) {             // ✅ 关键修正：直接取 File 对象（不加 .value），并追加到 FormData             const file = $el[0].files[0];             formData.append(id, file); // 支持文件名自动传递         } else {             value = $el.val();             if (value !== undefined && value !== null) {                 formData.append(id, value);             }         }     });      // 发送请求（必须禁用 jquery 自动处理）     $.ajax({         url: '/api/submit',         type: 'POST',         data: formData,         processData: false,  // ✅ 必须设为 false：防止 jQuery 将 FormData 转为字符串         contentType: false,  // ✅ 必须设为 false：让浏览器自动设置 multipart/form-data 及 boundary         success: function(res) {             console.log('提交成功:', res);         },         error: function(xhr) {             console.error('提交失败:', xhr.responsejson);         }     }); });

⚠️ 注意事项：

• 不要将 File 对象存入普通 JS 对象（如 { file: fileObj }），因其无法被 JSON.stringify() 序列化，且 jQuery 默认 AJAX 会尝试序列化 data；
• FormData.append(key, value) 可接受 File、Blob 或字符串，浏览器会自动构造符合 multipart/form-data 规范的请求体；
• 若需支持多文件上传，可遍历 files 类数组：for (let i = 0; i
• 表单中建议为文件输入项添加 name 属性（与 id 一致更易维护），后端解析更可靠。

总结：文件字段的本质是二进制资源，其操作逻辑与文本字段截然不同。统一表单处理的核心不是“统一赋值”，而是“分类适配”——文本/选择框走键值对，文件走 FormData 原生通道。只有尊重浏览器 API 的设计契约，才能写出健壮、可扩展的通用表单提交逻辑。