首頁 > web前端 > js教程 > 如何在 JavaScript 中上傳 Blob?

如何在 JavaScript 中上傳 Blob?

Barbara Streisand
發布: 2024-11-06 06:08:02
原創
978 人瀏覽過

How do I Upload a Blob in JavaScript?

使用JavaScript 上傳Blob

在JavaScript 中處理音訊或其他多媒體資料時,經常會遇到Blob,它們是不可變的集合原始資料。為了有效地儲存或處理這些數據,您可能需要將其上傳到伺服器。以下是如何使用 JavaScript 上傳 Blob 的詳細指南:

使用 FormData

上傳 Blob 最簡單的方法之一是透過 FormData API。它是一個標準化 API,提供了一種建立 HTTP 請求的方法,該請求的有效負載包含常規表單資料和二進位資料(例如 blob)。

jQuery.ajax 實作

要使用jQuery.ajax 上傳Blob,請依照以下步驟操作:

  1. 建立一個新的FormData物件:
var fd = new FormData();
登入後複製
  1. 附加檔名和blob 到FormData 物件:
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);
登入後複製
  1. 將jQuery.ajax 調用的選項設定為false:
$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});
登入後複製

透過將processData 設為false,我們可以防止jQuery 將FormData 物件轉換為字串,這對於blob 等二進位資料是必需的。同樣,將 contentType 設為 false 可以讓瀏覽器決定上傳的適當內容類型。

自訂實作

如果您喜歡建立XHR (XMLHttpRequest) 物件手動,您可以使用下列步驟:

  1. 初始化一個新的XMLHttpRequest 物件:
var xhr = new XMLHttpRequest();
登入後複製
  1. 設定方法、URL 和請求標頭:
xhr.open('POST', '/upload.php', true);
xhr.setRequestHeader('Accept', 'application/json');
登入後複製
    建立資料並附加物件:
  1. var fd = new FormData();
    fd.append('fname', 'test.wav');
    fd.append('data', soundBlob);
    登入後複製
      將FormData 作為請求正文發送:
    xhr.send(fd);
    登入後複製
      處理onload 事件中的伺服器回應:
    處理onload 事件中的伺服器回應:
    xhr.onload = function() {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    };
    登入後複製

    處理onload 事件中的伺服器回應:處理onload 事件中的伺服器回應:處理onload 事件中的伺服器回應:透過執行下列步驟,您可以使用JavaScript 有效地將Blob 上傳到伺服器,讓您能夠有效地處理和儲存多媒體資料。
  2. 以上是如何在 JavaScript 中上傳 Blob?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板