JavaScript로 Blob을 어떻게 업로드하나요?

JavaScript로 Blob 업로드

JavaScript에서 오디오 또는 기타 멀티미디어 데이터를 처리할 때 Blob을 접하는 것이 일반적입니다. 원시 데이터. 이 데이터를 효과적으로 저장하거나 처리하려면 서버에 업로드해야 할 수도 있습니다. 다음은 JavaScript를 사용하여 Blob을 업로드하는 방법에 대한 자세한 가이드입니다.

FormData 사용

Blob을 업로드하는 가장 간단한 방법 중 하나는 FormData API를 사용하는 것입니다. Blob과 같은 정규 형식 데이터와 바이너리 데이터를 모두 포함하는 페이로드로 HTTP 요청을 생성하는 방법을 제공하는 표준화된 API입니다.

jQuery.ajax 구현

jQuery.ajax를 사용하여 Blob을 업로드하려면 다음 단계를 따르세요.

1. 새 FormData 개체를 만듭니다.

var fd = new FormData();

2. 파일 이름과 Blob을 FormData 개체에 추가합니다.

fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

3. jQuery.ajax 호출의 processData 및 contentType 옵션을 false로 설정합니다.

$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});

By processData를 false로 설정하면 jQuery가 FormData 개체를 blob과 같은 이진 데이터에 필요한 문자열로 변환하는 것을 방지합니다. 마찬가지로, contentType을 false로 설정하면 브라우저가 업로드에 적합한 콘텐츠 유형을 결정할 수 있습니다.

맞춤 구현

XHR(XMLHttpRequest) 개체를 생성하려는 경우 수동으로 다음 단계를 사용할 수 있습니다.

1. 새 XMLHttpRequest 객체 초기화:

var xhr = new XMLHttpRequest();

2. 메서드, URL 및 요청 헤더 설정:

xhr.open('POST', '/upload.php', true);
xhr.setRequestHeader('Accept', 'application/json');

3. FormData 개체를 생성하고 데이터를 추가합니다.

var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

4. FormData를 요청 본문으로 보냅니다.

xhr.send(fd);

5. onload 이벤트에서 서버 응답을 처리합니다.

xhr.onload = function() {
    var data = JSON.parse(xhr.responseText);
    console.log(data);
};

다음 단계를 따르면 JavaScript를 사용하여 Blob을 서버에 효율적으로 업로드할 수 있습니다. 멀티미디어 데이터를 효과적으로 처리하고 저장합니다.

위 내용은 JavaScript로 Blob을 어떻게 업로드하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!