Bagaimana untuk Melaksanakan Muat Naik Fail AJAX dengan FormData Menggunakan Drag dan Drop?

Muat Naik Fail AJAX dengan FormData

Masalah:

Menggunakan FormData untuk muat naik fail dalam Permintaan AJAX dengan HTML dinamik yang dihasilkan menggunakan seret dan lepas kefungsian.

Kod HTML:

<form>

Kod JavaScript:

$('.wpc_contact').submit(function(event) {
  var form = $('.wpc_contact').serialize();
  var formname = $('.wpc_contact').attr('name');
  var FormData = new FormData($(form)[1]);

  $.ajax({
    url: '<?php echo plugins_url(); ?>/wpc-contact-form/resources/js/tinymce.php',
    data: { form: form, formname: formname, FormData: FormData },
    type: 'POST',
    processData: false,
    contentType: false,
    success: function(data) {
      alert(data);
    }
  });
});

Penyelesaian:

Untuk menggunakan FormData dengan betul, ikuti ini langkah:

1. Penyediaan:

• Gunakan 'borang' objek JavaScript standard untuk menghantar keseluruhan borang ke FormData():

  var form = $('form')[0];
  var formData = new FormData(form);

• Sebagai alternatif, nyatakan data khusus kepada FormData():

  var formData = new FormData();
  formData.append('file', $('input[type=file]')[0].files[0]);

2. Menghantar Borang:

Gunakan permintaan jQuery AJAX dengan pilihan ini:

$.ajax({
  url: 'Your url here',
  data: formData,
  type: 'POST',
  contentType: false, // Required
  processData: false, // Required
  // ... Other options like success, etc.
});

Nota:

• Taip "POST " dalam pilihan adalah perlu kerana semua fail mesti dihantar melalui POST permintaan.
• contentType: false hanya tersedia dalam jQuery versi 1.6 dan seterusnya.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Muat Naik Fail AJAX dengan FormData Menggunakan Drag dan Drop?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!