Wie implementiert man den AJAX-Datei-Upload mit FormData per Drag & Drop?

AJAX-Datei-Upload mit FormData

Problem:

Verwendung von FormData für den Datei-Upload in einem AJAX-Anfrage mit dynamischem HTML, generiert mit Drag-and-Drop-Funktionalität.

HTML Code:

<form>

JavaScript-Code:

$('.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);
    }
  });
});

Lösung:

Um FormData korrekt zu verwenden , folgen Sie diesen Schritten:

1. Vorbereitung:

• Verwenden Sie das Standard-JavaScript-Objekt „form“, um das gesamte Formular an FormData() zu übergeben:

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

• Alternativ können Sie auch bestimmte Daten angeben FormData():

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

2. Senden des Formulars:

Verwenden Sie die jQuery-AJAX-Anfrage mit diesen Optionen:

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

Hinweis:

• Geben Sie „POST“ ein „in-Optionen ist erforderlich, da alle Dateien per POST-Anfrage gesendet werden müssen.
• contentType: false ist nur in verfügbar jQuery Version 1.6 und höher.

Das obige ist der detaillierte Inhalt vonWie implementiert man den AJAX-Datei-Upload mit FormData per Drag & Drop?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!