Bagaimanakah Saya Boleh Muat Naik Data dan Fail Secara serentak Menggunakan Ajax?

Memuat Naik Data dan Fail Serentak Menggunakan Ajax

Menggunakan Ajax untuk penyerahan borang menawarkan pengalaman pengguna yang lancar, tetapi cabaran timbul apabila cuba memuat naik kedua-duanya data dan fail secara serentak. Artikel ini menangani isu ini, menunjukkan cara menggabungkan muat naik fail dan kaedah pengumpulan data untuk mencapai penyerahan berbilang medan yang berjaya.

Memahami Masalah

Pertanyaan berpunca daripada strategi berbeza yang digunakan untuk menyerahkan data dan fail menggunakan jQuery dan Ajax. Semasa data dikumpul menggunakan .serialize(), fail menggunakan FormData baharu($(this)[0]). Penggabungan teknik ini membolehkan penghantaran data dan fail serentak.

Penyelesaian

Penyelesaian terletak pada penggunaan pengecam jQuery yang betul. Dengan menggunakan FormData baharu(ini) dan bukannya rakan sejawatan awalnya, kedua-dua data dan fail boleh dirangkumkan ke dalam objek FormData. Objek ini kemudiannya berfungsi sebagai parameter data untuk permintaan Ajax.

Kod Contoh

Coretan kod berikut mempamerkan penyepaduan kedua-dua kaedah:

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

Butiran Pelaksanaan

Dalam kod yang disediakan, permintaan Ajax dimulakan selepas penyerahan borang, menggunakan objek FormData untuk merangkum semua medan dan fail borang. Pilihan contentType dan processData dinyahdayakan untuk memastikan bahawa FormData asli kekal tidak diubah suai. Panggilan balik kejayaan mengendalikan respons yang diterima daripada pelayan.

Versi Ringkas

Untuk ringkasnya, kod berikut menawarkan versi ringkas penyelesaian:

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

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Muat Naik Data dan Fail Secara serentak Menggunakan Ajax?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!