Bagaimana untuk Membetulkan Isu Muat Naik Imej AJAX: Penyerahan Borang dan Mencetuskan Muat Naik?

Muat Naik Imej Didayakan Ajax

Apabila cuba menukar borang kepada AJAX untuk muat naik imej, anda mungkin menghadapi masalah dengan borang tidak bertindak balas kepada penyerahan atau pemilihan fail tidak mencetuskan fungsi muat naik. Berikut ialah penjelasan terperinci tentang penyelesaian:

Mengatasi Isu Penyerahan Borang

Kod JavaScript asal tidak mempunyai ralat yang betul dan pengendalian kejayaan dalam panggilan AJAX. Untuk membetulkannya, tambahkan perkara berikut:

success:function(data){
    console.log("success");
    console.log(data);
},
error: function(data){
    console.log("error");
    console.log(data);
}

Fungsi ini menyediakan cara untuk memeriksa respons daripada pelayan dan mengendalikan sebarang kemungkinan ralat atau muat naik yang berjaya.

Mencetuskan Muat Naik pada Pemilihan Fail

Untuk mencetuskan fungsi muat naik serta-merta selepas pemilihan fail, tambahkan pendengar acara berikut pada input fail anda elemen:

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

Kod ini mendengar sebarang perubahan pada nilai elemen input fail dan menyerahkan borang secara automatik, memulakan muat naik AJAX.

Cuti Kod Lengkap

Menggabungkan penyelesaian di atas, kod JavaScript akhir anda sepatutnya kelihatan seperti ini:

$(document).ready(function (e) {
    $('#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);
            }
        });
    }));

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

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Muat Naik Imej AJAX: Penyerahan Borang dan Mencetuskan Muat Naik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!