jQuery와 FormData를 사용하여 Blob을 서버에 업로드하는 방법은 무엇입니까?

JavaScript를 사용하여 Blob 업로드

오디오나 비디오 등 웹 애플리케이션 내에서 멀티미디어 데이터를 처리할 때 이러한 파일을 업로드해야 하는 경우가 많습니다. 원격 서버로. JavaScript에는 이 작업을 수행하는 방법이 여러 가지 있습니다.

일반적인 접근 방식 중 하나는 jQuery의 $.post() 메서드를 사용하는 것입니다. 그러나 Blob으로 작업할 때 데이터를 성공적으로 업로드하려면 특정 수정이 필요합니다.

FormData API를 사용하는 솔루션

jQuery를 사용하여 Blob을 업로드하려면 다음이 필요합니다. FormData API를 사용하세요. 이 API는 양식 데이터를 구성하고 Blob과 같은 추가 데이터를 요청에 첨부하기 위한 메커니즘을 제공합니다.

다음은 jQuery의 $.post() 메서드와 함께 FormData API를 사용하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!