使用JS/FormData/AJAX向PHP传参时文本数据未传输成功问题

问题由两处逻辑错误共同导致：

1. JS变量引用和执行顺序错误
   你在$(document).ready外部提前初始化FormData并追加message字段，但表单提交事件里重新用new FormData(this)生成了全新的FormData实例作为请求参数，之前提前拼接好、携带message的formData变量根本没有被传入AJAX请求，属于完全无效的代码。
2. 表单DOM结构错误
   id为messageInput的文本输入框放在了#image_form表单标签外部，FormData构造函数只会收集传入DOM节点内部的表单字段，就算没有重新生成FormData实例，表单外部的输入值也不会被自动采集。
   最终请求只携带了表单内部的文件字段和submit提交按钮字段，所以PHP端只能拿到submit参数，无法获取message内容。

两种改法可选，第一种更符合表单开发规范：

• 方案一（推荐）：将message文本输入框移动到#image_form表单标签内部，同时把FormData的初始化逻辑移到表单提交事件回调内，直接使用拼接好的实例作为请求参数，不需要额外手动append message字段。
• 方案二：如果受布局限制不能把输入框放到表单内部，就在提交事件内初始化FormData之后，手动获取messageInput的值append到FormData实例里，再把这个实例传给AJAX的data参数。

DOM结构（方案一写法） #

<form id="image_form" enctype="multipart/form-data">
    <input type="file" name="files[]" id="files" multiple >
    <input type="text" name="message" id="messageInput">
    <input type="submit" name="submit" id="submit"/>
</form>

JS逻辑 #

$(document).ready(function() {
    $('#image_form').submit(function(e) {
        e.preventDefault();
        // 提交时基于当前表单初始化FormData
        let formData = new FormData(this);
        // 若用方案二（输入框在表单外），打开下面这行注释即可
        // formData.append("message", $('#messageInput').val());
        $.ajax({
            url: "https://example.com/test.php",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function(status) {
                $('#result').append(status);
            }
        });
    });
});

后端PHP代码不需要做任何修改，调整完前端代码后就能正常通过$_POST['message']拿到文本输入内容，文件上传逻辑也不会受影响。

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