JavaScript で BLOB をアップロードするにはどうすればよいですか?

JavaScript を使用した BLOB のアップロード

JavaScript でオーディオまたはその他のマルチメディア データを扱う場合、不変のコレクションである BLOB がよく発生します。生データ。このデータを効果的に保存または処理するには、サーバーにアップロードする必要がある場合があります。 JavaScript を使用して BLOB をアップロードする方法の詳細なガイドは次のとおりです。

FormData の使用

BLOB をアップロードする最も簡単な方法の 1 つは、FormData API を使用することです。これは、通常のフォーム データと BLOB などのバイナリ データの両方を含むペイロードを含む HTTP リクエストを作成する方法を提供する標準化された API です。

jQuery.ajax 実装

jQuery.ajax を使用して BLOB をアップロードするには、次の手順に従います。

1. 新しい FormData オブジェクトを作成します。

var fd = new FormData();

2. ファイルの名前とファイルの両方を追加します。 BLOB を FormData オブジェクトに追加します:

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

3. jQuery.ajax 呼び出しの processData および contentType オプションを false に設定します:

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

By processData を false に設定すると、jQuery が FormData オブジェクトを文字列に変換できなくなります。これは BLOB のようなバイナリ データに必要です。同様に、contentType を false に設定すると、ブラウザがアップロードに適切なコンテンツ タイプを決定できるようになります。

カスタム実装

XHR (XMLHttpRequest) オブジェクトを作成したい場合手動で行う場合は、次の手順を使用できます:

1. 新しい XMLHttpRequest オブジェクトを初期化します:

var xhr = new XMLHttpRequest();

2. メソッド、URL、およびリクエスト ヘッダーを設定します:

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

3. FormData オブジェクトを作成し、データを追加します:

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

4. FormData をリクエスト本文として送信します:

xhr.send(fd);

5. onload イベントでサーバーの応答を処理します:

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

これらの手順に従うことで、JavaScript を使用して BLOB をサーバーに効率的にアップロードでき、マルチメディア データを効果的に処理および保存します。

以上がJavaScript で BLOB をアップロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。