Ajax 文件上传，$_FILES 为空答案

【问题标题】：Ajax file upload, $_FILES emptyAjax 文件上传，$_FILES 为空
【发布时间】：2021-04-30 06:41:28
【问题描述】：

我正在尝试访问使用 AJAX 发布的上传文件，但我的 $_FILES 数组为空。我仍然可以访问我的 $_POST 数组中的所有内容。

我看过很多关于类似问题的帖子，但似乎没有一个修复有效。我之前已经多次这样做了，没有任何问题，但我看不出这里有什么问题。

这是我的 HTML 表单

<form enctype="multipart/form-data" action="include/ajaxCall.inc.php" class="postForm d-flex flex-column" method="post" id="createProduct">
        <input id="createProductImg" type="file" name="post_img" required><br>
        <input id="createProductName" type="text" name="post_name" placeholder="name" required>
        <input id="createProductPrice" type="text" name="post_price" placeholder="price" required>
        <input id="createProductManufactur" type="text" name="post_manufactur" placeholder="manufactur">
        <select id="createProductType" name="post_type"  required>
        </select>
        <select id="clothingsex" name="clothingsex" required>
        <option value="unisex">Unisex</option>
        <option value="male">Male</option>
        <option value="female">Female</option>
        </select>
        <textarea id="createProductDescription" name="post_description" required style="resize: none; placeholder="Write your description here:"></textarea>
        <input type="submit">
    </form>

这是我的ajax

 $("#createProduct").submit(function(event) {
        console.log("log");
            event.preventDefault();
            var form = $(this);
            var url = form.attr('action');
            $.ajax({
                type: "POST",
                url: url,
                data: form.serialize() + "&addProduct=1",
                success: function(data) {
                    console.log(data);
                }
            });
        });

她是我发送 POST 到的文件

if (isset($_POST['addProduct'])) {
        echo var_dump($_FILES);
}

【问题讨论】：

这能回答你的问题吗？ How can I upload files asynchronously?
您可能可以通过将您的 ajax 调用中的 contentType 添加到 multipart/form-data 来解决您的问题。

标签： javascript php ajax forms post

【解决方案1】：

您需要使用FormData而不是serialize()方法，可以在AJAX URL中添加addProduct=1参数或附加FormData对象。如果您像这样进行 AJAX 调用会怎样：

var form = $('#createProduct')[0];
$("#createProduct").submit(function(event) {
    var formData = new FormData(form);
    formData.append('addProduct', '1');
    event.preventDefault();
    var form = $(this);
    var url = form.attr('action');
    $.ajax({
        type: "POST",
        url: url,
        contentType: false, //THIS IS MANDATORY
        processData: false, //THIS IS MANDATORY
        data: formData,
        success: function(data) {
            console.log(data);
        }
    });
});

【讨论】：

这个解决方案有问题。在实际提交事件之前附加 html 表单。

【解决方案2】：

好的，我找到了解决方案。我的原始代码工作正常，问题是我在填写表单之前附加了表单数据。

【讨论】：