<p>我正在使用jQuery和Ajax来提交数据和文件，但我不确定如何在一个表单中同时发送数据和文件？</p> <p>我目前几乎以相同的方式使用这两种方法，但是收集数据到数组中的方式不同，数据使用<code>.serialize();</code>，而文件使用<code>= new FormData($(this)[0]);</code></p> <p>是否有可能将这两种方法结合起来，通过Ajax在一个表单中上传文件和数据？</p> <p><strong>数据 jQuery，Ajax和html</strong></p> <pre class="brush:php;toolbar:false;">$("form#data").submit(function(){ var formData = $(this).serialize(); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); &lt;form id="data" method="post"&gt; &lt;input type="text" name="first" value="Bob" /&gt; &lt;input type="text" name="middle" value="James" /&gt; &lt;input type="text" name="last" value="Smith" /&gt; &lt;button&gt;提交&lt;/button&gt; &lt;/form&gt;</pre> <p><strong>文件 jQuery，Ajax和html</strong></p> <pre class="brush:php;toolbar:false;">$("form#files").submit(function(){ var formData = new FormData($(this)[0]); $.ajax({ url: window.location.pathname, type: 'POST', data: formData, async: false, success: function (data) { alert(data) }, cache: false, contentType: false, processData: false }); return false; }); &lt;form id="files" method="post" enctype="multipart/form-data"&gt; &lt;input name="image" type="file" /&gt; &lt;button&gt;提交&lt;/button&gt; &lt;/form&gt;</pre> <p>如何将上述内容结合起来，以便我可以通过Ajax在一个表单中发送数据和文件？</p> <p>我的目标是能够通过Ajax将所有这些表单一起发送，这可能吗？</p> <pre class="brush:php;toolbar:false;">&lt;form id="datafiles" method="post" enctype="multipart/form-data"&gt; &lt;input type="text" name="first" value="Bob" /&gt; &lt;input type="text" name="middle" value="James" /&gt; &lt;input type="text" name="last" value="Smith" /&gt; &lt;input name="image" type="file" /&gt; &lt;button&gt;提交&lt;/button&gt; &lt;/form&gt;</pre> <p><br /></p>

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //为表单创建一个唯一的iframe
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //获取服务器响应
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>提交</button>
</form>

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});