Bagaimana untuk menggunakan Ajax untuk memuat naik data dan fail pada masa yang sama?

Question

Saya menggunakan jQuery dan Ajax untuk menyerahkan data dan fail, tetapi saya tidak pasti cara menghantar kedua-dua data dan fail dalam satu bentuk?

Saya pada masa ini menggunakan kedua-dua kaedah dengan cara yang hampir sama, tetapi cara mengumpul data ke dalam tatasusunan adalah berbeza, data menggunakan .serialize(); dan fail menggunakan ;= new FormData($(this)[0]);

Adakah mungkin untuk menggabungkan kedua-dua kaedah ini untuk memuat naik fail dan data dalam satu bentuk melalui Ajax?

Data jQuery, Ajax dan html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        jenis: 'POST',
        data: formData,
        async: palsu,
        kejayaan: fungsi (data) {
            makluman(data)
        },
        cache: palsu,
        Jenis kandungan: palsu,
        processData: palsu
    });

    kembali palsu;
});

<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" />
    <butang>Serah</button>
</form>

JQuery Dokumentasi, Ajax dan html

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        jenis: 'POST',
        data: formData,
        async: palsu,
        kejayaan: fungsi (data) {
            makluman(data)
        },
        cache: palsu,
        Jenis kandungan: palsu,
        processData: palsu
    });

    kembali palsu;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <butang>Serah</button>
</form>

Bagaimanakah saya boleh menggabungkan perkara di atas supaya saya boleh menghantar data dan fail dalam satu bentuk melalui Ajax?

Matlamat saya adalah untuk dapat menghantar semua borang ini bersama-sama melalui Ajax, adakah ini mungkin?

<form id="datafiles" 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" />
    <butang>提交</button>
</form>

Answer 1

Pilihan lain ialah menggunakan iframe dan tetapkan sasaran borang padanya.

Anda boleh mencuba ini (ia menggunakan 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);
        });
    }
}

Ia berfungsi dalam semua penyemak imbas dan anda tidak perlu membuat siri atau menyediakan data. Satu kelemahan ialah anda tidak boleh memantau kemajuan.

Selain itu, sekurang-kurangnya untuk Chrome, permintaan itu tidak muncul di bawah tab "xhr" dalam alat pembangun, tetapi di bawah "doc".

Answer 2

Masalah yang saya hadapi ialah menggunakan pengecam jQuery yang salah.

Anda boleh menggunakan borang menggunakan ajax untuk memuat naik data dan fail.

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

Versi ringkas

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

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