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

Memuat Naik Kedua-dua Data dan Fail dalam Satu Borang Menggunakan Ajax

Memuat naik kedua-dua data dan fail dalam satu bentuk Ajax ialah keperluan biasa dalam aplikasi web. Berikut ialah penjelasan terperinci tentang cara untuk mencapai tugas ini dengan berkesan.

Masalahnya

Cuba menyerahkan kedua-dua data dan fail menggunakan Ajax boleh menjadi rumit kerana cara yang berbeza mereka dikendalikan oleh jQuery. Semasa $.serialize() mengumpulkan data ke dalam tatasusunan, fail borang memerlukan penggunaan FormData().

Menggabungkan Kaedah

Kunci untuk menggabungkan kaedah ini sedang menggunakan objek FormData. FormData ialah pembina terbina dalam yang membolehkan anda mencipta objek data borang. Objek ini boleh menyimpan kedua-dua data dan fail, menjadikannya sesuai untuk tujuan kita.

Contoh

Untuk menggabungkan kedua-dua kaedah, gunakan kod berikut:

$("form#datafiles").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
    });
});

Dalam kes ini, borang #datafiles mengandungi kedua-dua input data biasa dan input fail. Baris FormData(ini) baharu mencipta objek FormData baharu dengan data borang.

Skrip PHP

Untuk mengendalikan data dan fail yang dimuat naik di bahagian pelayan, gunakan skrip PHP seperti ini:

<?php

print_r($_POST);
print_r($_FILES);

?>

Dengan kod ini, anda boleh mengakses kedua-dua data borang dan fail yang dimuat naik menggunakan superglobal $_POST dan $_FILES.

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!