Comment implémenter le téléchargement de fichiers AJAX avec FormData par glisser-déposer ?

Téléchargement de fichiers AJAX avec FormData

Problème :

Utilisation de FormData pour le téléchargement de fichiers dans un Requête AJAX avec HTML dynamique généré par glisser-déposer fonctionnalité.

Code HTML :

<form>

Code 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);
    }
  });
});

Solution :

Pour utiliser correctement FormData, suivez ces étapes :

1. Préparation :

• Utilisez l'objet JavaScript standard 'form' pour transmettre l'intégralité du formulaire à FormData() :

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

• Vous pouvez également spécifier des données spécifiques à FormData() :

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

2. Envoi du formulaire :

Utilisez la requête jQuery AJAX avec ces options :

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

Remarque :

• Tapez "POST " dans les options est nécessaire car tous les fichiers doivent être envoyés via une requête POST.
• contentType : false n'est disponible que dans jQuery version 1.6 et versions ultérieures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!