如何使用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"> <輸入類型=“文字”名稱=“第一個”值=“鮑勃”/> <輸入類型=“文字”名稱=“中間”值=“詹姆斯”/> <輸入類型=“文字”名稱=“最後”值=“史密斯”/> <輸入名稱=“圖像”類型=“檔案”/> <按鈕>提交 </form></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);
    });
});