Wie lade ich Blobs mit jQuery und FormData auf einen Server hoch?

Hochladen von Blobs mit JavaScript

Beim Umgang mit Multimediadaten in Webanwendungen, wie Audio oder Video, ist es oft notwendig, diese Dateien hochzuladen an einen Remote-Server. In JavaScript gibt es mehrere Methoden, um diese Aufgabe zu erfüllen.

Ein gängiger Ansatz ist die Verwendung der $.post()-Methode von jQuery. Bei der Arbeit mit Blobs sind jedoch bestimmte Änderungen erforderlich, um die Daten erfolgreich hochzuladen.

Lösung mit der FormData-API

Um einen Blob mit jQuery hochzuladen, ist es notwendig Verwenden Sie die FormData-API. Diese API bietet einen Mechanismus zum Erstellen von Formulardaten und zum Anhängen zusätzlicher Daten wie Blobs an die Anfrage.

So können Sie die FormData-API mit der $.post()-Methode von jQuery verwenden, um einen Blob hochzuladen:

<code class="javascript">var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});</code>

In diesem Code:

1. Ein FormData-Objekt (fd) wird erstellt.
2. Die Schlüssel „fname“ und „data“ werden dem Formular hinzugefügt Daten. „fname“ stellt den gewünschten Dateinamen auf dem Server dar, während „data“ den Sound-Blob enthält.
3. JQuerys $.ajax()-Methode wird verwendet, um die Anfrage auszuführen.
4. Prozessdaten und Inhaltstyp Optionen werden auf „false“ gesetzt. Dies ist wichtig, da $.ajax() die Formulardaten automatisch in eine Abfragezeichenfolge umwandelt, die nicht für Blobs geeignet ist.

Durch die Verwendung der FormData-API und das Weglassen des Standardverarbeitungsverhaltens von $.ajax (), lädt dieser Code den Blob erfolgreich auf den Server hoch.

Das obige ist der detaillierte Inhalt vonWie lade ich Blobs mit jQuery und FormData auf einen Server hoch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!