Wie lade ich einen Blob in JavaScript hoch?

Hochladen von Blobs mit JavaScript

Beim Umgang mit Audio- oder anderen Multimediadaten in JavaScript stößt man häufig auf Blobs, bei denen es sich um unveränderliche Sammlungen von handelt Rohdaten. Um diese Daten effektiv zu speichern oder zu verarbeiten, müssen Sie sie möglicherweise auf einen Server hochladen. Hier ist eine detaillierte Anleitung zum Hochladen eines Blobs mit JavaScript:

Verwenden von FormData

Eine der einfachsten Methoden zum Hochladen eines Blobs ist die FormData-API. Es handelt sich um eine standardisierte API, die eine Möglichkeit bietet, eine HTTP-Anfrage mit einer Nutzlast zu erstellen, die sowohl Daten in regulärer Form als auch Binärdaten wie Blobs enthält.

jQuery.ajax-Implementierung

Um einen Blob mit jQuery.ajax hochzuladen, führen Sie die folgenden Schritte aus:

1. Erstellen Sie ein neues FormData-Objekt:

var fd = new FormData();

2. Fügen Sie sowohl den Namen als auch die Datei hinzu den Blob zum FormData-Objekt:

fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

3. Setzen Sie die Optionen „processData“ und „contentType“ des jQuery.ajax-Aufrufs auf „false“:

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

By Wenn wir „processData“ auf „false“ setzen, verhindern wir, dass jQuery das FormData-Objekt in einen String konvertiert, was für Binärdaten wie Blobs erforderlich ist. Wenn Sie „contentType“ auf „false“ setzen, kann der Browser in ähnlicher Weise den geeigneten Inhaltstyp für den Upload ermitteln.

Benutzerdefinierte Implementierung

Wenn Sie lieber ein XHR-Objekt (XMLHttpRequest) erstellen möchten Manuell können Sie die folgenden Schritte ausführen:

1. Neues XMLHttpRequest-Objekt initialisieren:

var xhr = new XMLHttpRequest();

2. Methode, URL und Anforderungsheader festlegen:

xhr.open('POST', '/upload.php', true);
xhr.setRequestHeader('Accept', 'application/json');

3. Erstellen Sie ein FormData-Objekt und hängen Sie die Daten an:

var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

4. Senden Sie die FormData als Anforderungstext:

xhr.send(fd);

5. Behandeln Sie die Serverantwort im Onload-Ereignis:

xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
};

Durch Befolgen dieser Schritte können Sie Blobs mithilfe von JavaScript effizient auf einen Server hochladen, was Ihnen ermöglicht um Multimediadaten effektiv zu verarbeiten und zu speichern.

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