Rumah > pembangunan bahagian belakang > tutorial php > Bagaimana Mengendalikan Hantar dan Tukar Acara untuk Muat Naik Imej Ajax?

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

Patricia Arquette
Lepaskan: 2024-12-15 19:34:17
asal
210 orang telah melayarinya

How to Handle Submit and Change Events for Ajax Image Uploads?

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);
        }
    });
}));
Salin selepas log masuk

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();
});
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan