如何使用 jQuery 和 FormData 將 Blob 上傳到伺服器？

使用JavaScript 上傳Blob

在Web 應用程式中處理多媒體資料（例如音訊或視訊）時，通常需要上傳這些檔案到遠端伺服器。在 JavaScript 中，有多種方法可以完成此任務。

常見的方法是使用 jQuery 的 $.post() 方法。但是，在使用 Blob 時，需要進行某些修改才能成功上傳資料。

使用 FormData API 的解決方案

要使用 jQuery 上傳 Blob，需要使用表單資料 API。此 API 提供了一種用於建構表單資料並將附加資料（例如 Blob）附加到請求的機制。

以下是如何使用FormData API 和jQuery 的$.post() 方法來上傳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中文網其他相關文章！