Bagaimana Mengendalikan Hantar dan Tukar Acara untuk Muat Naik Imej Ajax?

Muat Naik Ajax: Serahkan dan Tukar Pengendalian Acara

Gambaran Keseluruhan Isu:
Meningkatkan borang sedia ada untuk digunakan Ajax untuk memuat naik imej, kod yang disediakan nampaknya tidak lengkap, memerlukan tambahan kefungsian.

Penyelesaian:

1. Melaksanakan Penyerahan Borang dengan Ajax:

Dalam pengendali acara untuk penyerahan borang, kod yang disediakan tidak mempunyai elemen penting:

• Fungsi Kejayaan dan Ralat: Ajax memerlukan kedua-dua fungsi kejayaan dan ralat untuk mengendalikan respons daripada pelayan.
• Borang Data: Untuk menghantar data borang, gunakan formData = new FormData(this); dan tetapkan contentType dan processData kepada false untuk keserasian Ajax.

Kod Diubah Suai:

$('#imageUploadForm').on('submit', (function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            console.log("success");
            console.log(data);
        },
        error: function(data) {
            console.log("error");
            console.log(data);
        }
    });
}));

2. Mencetuskan Muat Naik pada Pemilihan Fail:

Untuk memulakan muat naik pada pemilihan fail, gunakan peristiwa perubahan pada input fail:

$("#ImageBrowse").on("change", function() {
    $("#imageUploadForm").submit();
});

Dengan pengubahsuaian ini, fungsi muat naik Ajax akan bekerja seperti yang diharapkan.

Atas ialah kandungan terperinci Bagaimana Mengendalikan Hantar dan Tukar Acara untuk Muat Naik Imej Ajax?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!