如何使用 JavaScript 和 jQuery 將 Blob 物件上傳到伺服器？

使用JavaScript 上傳Blob

在本文中，我們將探討如何上傳Blob 對象，例如使用Chrome 錄製的音訊資料getUserUserMedia()和Recorder.js，使用到伺服器JavaScript。

問題：

我們有一個包含聲音資料的 blob 對象，但需要使用 jQuery 的 post 方法將其上傳到伺服器的協助。

解決方案：

要上傳 blob，我們可以使用表單資料 API。這種方法是必要的，因為 jQuery 的 post 方法需要表單資料。

jQuery 實作：

1. 建立一個新的 FormData 物件。
2. 附加 blob使用 fd.append('data', 將資料加入 FormData soundBlob)。
3. 在 jQuery.ajax 設定中將 processData 和 contentType 設為 false，以防止 jQuery 自動處理表單資料。這允許我們上傳原始 blob 資料。
4. 使用 jQuery.ajax 將 FormData 物件傳送到伺服器。

範例程式碼：

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

依照下列步驟，您可以使用 JavaScript 成功將 Blob 資料上傳至伺服器， jQuery。

以上是如何使用 JavaScript 和 jQuery 將 Blob 物件上傳到伺服器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！