JavaScript 및 jQuery를 사용하여 Blob 개체를 서버에 업로드하는 방법은 무엇입니까?

JavaScript로 Blob 업로드

이 기사에서는 Chrome의 getUserMedia() 및 Recorder.js를 JavaScript를 사용하여 서버에 연결합니다.

문제:

사운드 데이터가 포함된 blob 개체가 있지만 이를 업로드하는 데 도움이 필요합니다. jQuery의 post 메소드를 사용하는 서버.

해결책:

BLOB을 업로드하려면 FormData API를 활용할 수 있습니다. jQuery의 post 메소드는 양식 데이터를 기대하기 때문에 이 접근 방식이 필요합니다.

jQuery 구현:

1. 새 FormData 객체를 생성합니다.
2. BLOB 추가 fd.append('data', soundBlob)를 사용하여 FormData에 데이터를 추가합니다.
3. jQuery가 양식 데이터를 자동으로 처리하지 못하도록 jQuery.ajax 설정에서 processData 및 contentType을 false로 설정합니다. 이를 통해 원시 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 및 jQuery를 사용하여 Blob 데이터를 서버에 성공적으로 업로드할 수 있습니다.

위 내용은 JavaScript 및 jQuery를 사용하여 Blob 개체를 서버에 업로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!