Wie lade ich Blob-Objekte mit JavaScript und jQuery auf einen Server hoch?

Hochladen von Blobs mit JavaScript

In diesem Artikel erfahren Sie, wie Sie ein Blob-Objekt hochladen, beispielsweise mit Chrome aufgezeichnete Audiodaten getUserMedia() und Recorder.js an einen Server mit JavaScript.

Problem:

Wir haben ein Blob-Objekt mit soliden Daten, benötigen aber Hilfe beim Hochladen auf einen Server mithilfe der Post-Methode von jQuery.

Lösung:

Um einen Blob hochzuladen, können wir die FormData-API verwenden. Dieser Ansatz ist notwendig, da die Post-Methode von jQuery Formulardaten erwartet.

jQuery-Implementierung:

1. Erstellen Sie ein neues FormData-Objekt.
2. Blob anhängen Daten mit fd.append('data', soundBlob) in die FormData einfügen.
3. ProcessData und festlegen contentType in den jQuery.ajax-Einstellungen auf „false“ setzen, um zu verhindern, dass jQuery die Formulardaten automatisch verarbeitet. Dadurch können wir die Blob-Rohdaten hochladen.
4. Senden Sie das FormData-Objekt mit jQuery.ajax an den Server.

Beispielcode:

<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>

Indem Sie diese Schritte befolgen, können Sie Blob-Daten mithilfe von JavaScript und jQuery erfolgreich auf einen Server hochladen.

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