使用 jQuery ajax() 时 FormData 为空答案

【问题标题】：FormData is empty when using jQuery ajax()使用 jQuery ajax() 时 FormData 为空
【发布时间】：2014-04-22 02:44:28
【问题描述】：

我尝试提交带有jQuery.ajax 文件的表单。 Google 说我应该使用FormData，它会自动将文件和所有输入编码到一个我可以通过 XHR 发送的对象中。

嗯，FormData 对象是空的。它在调试器和服务器端是空的。我找不到错误。这是代码。浏览器是 Firefox 27。

<form method="post" action="" enctype="multipart/form-data" id="generate_params">
    <input type="hidden" name="id" value="1">
    <input type="hidden" name="action" value="AJAX_BANNERS_GENERATE">
</form>

<div>
    <p>
        <label>
            Image: <input type="file" name="bg_image[]" form="generate_params" required>
        </label>
    </p>
</div>

<input type="submit" form="generate_params">

<script>
    $(document).ready(function () {
        $("#generate_params").submit(function (e) {
            var data = new FormData(this);

            $.ajax({
                data: data,
                method: "POST",
                success: function (url) {
                    alert("ok");
                },
                cache: false,
                contentType: false,
                processData: false
            });

            e.preventDefault();
            return false;
        });
    });
</script>

在 Params 部分的 Network 选项卡上的 Firebug 中，我看到以下行：

[object FormData]: "undefined"?认真的吗？

我什至无法发送 FormData 从头开始创建的对象。像这样

var data = new FormData();
data.append("test", {value: 0}); // still empty

【问题讨论】：

标签： javascript jquery ajax file-upload

【解决方案1】：

原来，我使用的是不支持 FormData 的 jQuery 1.8.1。库更新解决了这个问题。

【讨论】：

我在 jquery2.2.4.min.js 中遇到问题

【解决方案2】：

我会这样做：

打开和关闭Form 标签应该包含所有输入文件！
e.preventDefault(); 应该在函数的开头，更好的做法。

JS：

$("#generate_params").submit(function(e) {
    e.preventDefault();

    if( window.FormData !== undefined ) 
         //make sure that we can use FormData ie>9, chrome > 7, opera > 12 safari >5, android > 3  gecko mobile > 2, opera mobile >12 <- wil support XHR too
    {

        var formData = new FormData(this);
        // you can append aditional values:
        //  formData.append("be",logmebehave);
        $.ajax({
            url: 'filesend.php',  //Path to the server script that process the data
            type: 'POST',
            data: formData,
            xhr: function() {  },
            success: function(response){},
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
         });
    } else {

       //Fallback

    }

    return false;
});

FormData 将支持多文件上传。

将属性添加到您的表单标签：

enctype="multipart/form-data"

应该很好用！

注意：您可能会发现服务器端页面上的 FILES 数组是空的 - 在这种情况下，您需要确保您的服务器配置允许文件上传，文件上传的大小限制足够，post时间就够了……

最好的开始方法是确保允许文件上传，然后使用非常小文件，以确保您的代码中的所有内容都正常。

【讨论】：

你可以写var formData = new FormData(this);而不是var formData = new FormData($('#generate_params')[0]);。 'this' 是提交处理程序中的实际表单。
记录新的 FormData 会给我一个空对象，即使 $('#generate_params')[0] 向我显示了表单对象。有什么想法吗？

【解决方案3】：

与 Django 后端的问题完全相同。通过向表单内的所有输入添加 name 属性来解决此问题，因为它们用于处理 dict/hashmap 结构中的表单数据。

祝你好运。

【讨论】：