jQueryを使用してBlobをサーバーにアップロードするにはどうすればよいですか?

JavaScript での BLOB のアップロード

HTML5 API を使用して記録されたオーディオ データやビデオ データなどのデータ BLOB をサーバーにアップロードすることは、Web アプリケーションの一般的なタスクです。この記事では、JavaScript、特に jQuery を使用して BLOB をサーバーにアップロードする方法を説明します。

jQuery ファイル アップロード メソッド

提供されたコード スニペットで使用されている jQuery post() メソッド。 BLOB のようなバイナリ データのアップロードには適していません。この目的には、代わりに FormData API の使用をお勧めします。

FormData オブジェクトの作成

FormData を使用するには、新しい FormData オブジェクトを作成し、必要なデータをそれに追加します。提供された例では、ファイル名と BLOB データを FormData オブジェクトに追加します。

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

jQuery を使用した AJAX リクエスト

次に、jQuery の $.ajax() メソッドを使用して、マルチパート/フォームデータリクエストとしての FormData オブジェクト。リクエストのタイプ、URL、データを指定し、processData と contentType を false に設定します。

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

このコードは、BLOB データをファイル名とともに /upload.php のサーバー側 PHP スクリプトに送信します。 、応答をログに記録します。

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