使用 jQuery ajax() 时 FormData 为空

Question

我尝试使用 jQuery.ajax 提交带有文件的表单。谷歌说我应该使用 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>

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

[object FormData]: "undefined" ？严重地？

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

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

原文由 efpies 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

结果，我使用的是不支持 FormData 的 jQuery 1.8.1。图书馆更新解决了这个问题。

原文由 efpies 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是我会怎么做：

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

记者：

 $("#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 数组为空 - 在这种情况下，您需要确保您的服务器配置允许文件上传、文件上传的大小限制足够、发布时间足够等….

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

原文由 Shlomi Hassid 发布，翻译遵循 CC BY-SA 3.0 许可协议