如何使用Ajax实现同时上传数据和文件？

Question

<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; }); <form id="data" method="post"> <input type="text" name="first" value="Bob" /> <input type="text" name="middle" value="James" /> <input type="text" name="last" value="Smith" /> <button>提交</button> </form></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; }); <form id="files" method="post" enctype="multipart/form-data"> <input name="image" type="file" /> <button>提交</button> </form></pre> <p>如何将上述内容结合起来，以便我可以通过Ajax在一个表单中发送数据和文件？</p> <p>我的目标是能够通过Ajax将所有这些表单一起发送，这可能吗？</p> <pre class="brush:php;toolbar:false;"><form id="datafiles" method="post" enctype="multipart/form-data"> <输入类型=“文本”名称=“第一个”值=“鲍勃”/> <输入类型=“文本”名称=“中间”值=“詹姆斯”/> <输入类型=“文本”名称=“最后”值=“史密斯”/> <输入名称=“图像”类型=“文件”/> <按钮>提交 </表格></pre> <p><br />></p>

Answer 1

另一种选择是使用iframe并将表单的目标设置为它。

你可以尝试这样做（它使用jQuery）：

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);
        });
    }
}

它适用于所有浏览器，您不需要序列化或准备数据。 一个缺点是您无法监视进度。

此外，至少对于Chrome来说，请求不会出现在开发者工具的“xhr”选项卡下，而是出现在“doc”下。

Answer 2

我遇到的问题是使用了错误的jQuery标识符。

您可以使用一个表单使用ajax来上传数据和文件。

PHP + HTML

<?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>

jQuery + Ajax

$("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);
    });
});