jQuery と FormData を使用して BLOB をサーバーにアップロードする方法

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

Web アプリケーション内でオーディオやビデオなどのマルチメディア データを処理する場合、多くの場合、これらのファイルをアップロードする必要があります。リモートサーバーに。 JavaScript では、このタスクを実行するための複数の方法があります。

一般的なアプローチの 1 つは、jQuery の $.post() メソッドを使用することです。ただし、Blob を使用する場合、データを正常にアップロードするには、特定の変更が必要です。

FormData API を使用したソリューション

jQuery を使用して BLOB をアップロードするには、次のことが必要です。 FormData API を使用します。この API は、フォーム データを構築し、Blob などの追加データをリクエストに添付するためのメカニズムを提供します。

jQuery の $.post() メソッドで FormData API を使用して Blob をアップロードする方法は次のとおりです。

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

このコード:

1. FormData オブジェクト (fd) が作成されます。
2. 「fname」キーと「data」キーがフォームに追加されます。データ。 「fname」はサーバー上の目的のファイル名を表し、「data」にはサウンド Blob が含まれます。
3. jQuery の $.ajax() メソッドはリクエストの実行に使用されます。
4. processData と contentTypeオプションは false に設定されます。 $.ajax() はフォーム データをクエリ文字列に自動的に変換しますが、これは BLOB には適していないため、これは重要です。

FormData API を使用し、$.ajax のデフォルトの処理動作を省略することによって()、このコードは BLOB をサーバーに正常にアップロードします。

以上がjQuery と FormData を使用して BLOB をサーバーにアップロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。