jquery ajax post文件，多个文件和文本输入

Posted 2023-03-14

【中文标题】jquery ajax post文件，多个文件和文本输入

【英文标题】：jquery ajax post file , multiple files and text input

【发布时间】：2016-11-17 01:48:22

【问题描述】：

大家好，我的 html 代码：

<form action="post.php" enctype="multipart/form-data" method="post">
   <input type="text" name="name" id=""><br>
   <input type="file" name="poster" id="poster"><br>
   <input type="file" name="scene[]" id="scene" multiple><br>
   <input type="submit" value="POST">
</form>

你看到一个文件，多个文件，我有一个文本值。此值“ajax”希望一次发送。我使用的是“JQuery”。

我不能以任何方式运行

$(function()
        $('input[type="submit"]').click(function(e)
            e.preventDefault();
            var file_data = $('#poster').prop('files')[0];
            var form = $('form').serialize();
            var form_data = new FormData();
            $.each($('input[name="scene[]"]'),function(i, obj) 
                $.each(obj.files,function(j,file)
                    form_data.append('photo['+i+']', file);
                    )
                );
            form_data.append(form);
            form_data.append('file',file_data);
            alert(form_data);
            $.ajax(
                url:'post.php',
                cache:false,
                contentType:false,
                processData:false,
                async:false,
                data:form_data,
                type:'post',
                success:function(answ)
                    $('#result').html(answ);
                
            )
        )
    )

我查看了其他类似的解决方案，但没有解决我的问题 对不起我的英语不好。

【参考方案1】：

您无需手动执行此操作；如果您只是将 form 作为 DOMElement 提供给 FormData 构造函数，那么所有表单值都将自动包含在内。

还请注意，您应该挂钩到表单的submit 事件，而不是提交按钮的click 事件。您还应该删除 async: false 的使用，因为使用它是非常糟糕的做法。

说了这么多，试试这个：

$('form').submit(function(e)
    e.preventDefault();
    var form_data = new FormData(this); 

    $.ajax(
        type: 'post',
        url: 'post.php',
        data: form_data,
        cache: false,
        contentType: false,
        processData: false,
        success: function(answ)
            $('#result').html(answ);
        
    )
)

【讨论】：

非常喜欢。新的表单数据（这个）；我没有考虑。天哪

没问题，很高兴为您提供帮助。供您参考，这里是FormData entry at MDN

@RoryMcCrossan，这将使用元素的名称属性创建表单的名称-值对。我正在使用 ASP.NET，它弄乱了服务器端控件的元素名称。因此，我使用元素的 ID 来使用序列化函数构造名称-值对（通过 id 遍历所有表单控件）。有没有办法可以序列化文本控件并将文件数据附加到表单数据？我可以像 OP 试图做的那样手动完成。提前致谢！