Wie verwende ich AJAX und FormData für Datei-Uploads?

AJAX-Datei-Upload mit FormData

Im Kontext von dynamischem HTML haben Sie per Drag-and-Drop ein Datei-Upload-Formular generiert und über JavaScript-Code zum Senden des Formulars mit AJAX verfügen. Um das Hochladen von Dateien mithilfe von FormData zu erleichtern, sind jedoch Anpassungen erforderlich.

Vorbereitungen

Um FormData zu verwenden, wählen Sie eine der folgenden Optionen:

• Gesamtformular zur Bearbeitung bereitstellen:

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

• Genaue Daten angeben für FormData:

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);

Senden des Formulars

Verwenden Sie das bereitgestellte jQuery-Snippet:

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

Diese Anfrage imitiert a reguläre Formularübermittlung mit enctype="multipart/form-data", sodass Sie Dateien hochladen können erfolgreich.

Hinweis: Denken Sie daran, in den Optionen den Typ „POST“ anzugeben, da für das Hochladen von Dateien POST-Anfragen erforderlich sind.

Aktualisierung: Wird gestartet mit jQuery 1.6 wird contentType: false unterstützt.

Das obige ist der detaillierte Inhalt vonWie verwende ich AJAX und FormData für Datei-Uploads?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!