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部分的Params标签上的Firebug中，我看到了这一行：

enter image description here

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

我甚至无法发送从头开始创建的FormData对象。喜欢这个

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

Answer 1

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

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

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

Answer 3

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

祝你好运。

使用jQuery ajax（）时FormData为空

3 个答案: