Como o javascript pode enviar um blob?

Eu tenho um dado de blob nessa estrutura:

Blob {type: "audio/wav", size: 655404, slice: function} size: 655404 type: "audio/wav" __proto__: Blob 

Na verdade, são dados de som gravados usando o getUerMedia() e o Recorder.js recentes do Chrome

Como posso carregar esse blob para o servidor usando o método post do jquery? Eu tentei isso sem muita sorte:

  $.post('http://localhost/upload.php', { fname: "test.wav", data: soundBlob }, function(responseText) { console.log(responseText); }); 

Tente isso

 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); }); 

Você precisa usar a API FormData e definir o jQuery.ajax e contentType do jQuery.ajax como false .

Não consegui usar o exemplo acima para trabalhar com blobs e queria saber exatamente o que está em upload.php. Então aqui vai você:

(testado apenas no Chrome 28.0.1500.95)

 // javascript function that uploads a blob to upload.php function uploadBlob(){ // create a blob here for testing var blob = new Blob(["i am a blob"]); //var blob = yourAudioBlobCapturedFromWebAudioAPI;// for example var reader = new FileReader(); // this function is triggered once a call to readAsDataURL returns reader.onload = function(event){ var fd = new FormData(); fd.append('fname', 'test.txt'); fd.append('data', event.target.result); $.ajax({ type: 'POST', url: 'upload.php', data: fd, processData: false, contentType: false }).done(function(data) { // print the output from the upload.php script console.log(data); }); }; // trigger the read from the reader... reader.readAsDataURL(blob); } 

O conteúdo de upload.php:

  

Você realmente não precisa usar FormData para enviar um Blob para o servidor de JavaScript (e um File também é um Blob ).

Exemplo de jQuery:

 var file = $('#fileInput').get(0).files.item(0); // instance of File $.ajax({ type: 'POST', url: 'upload.php', data: file, contentType: 'application/my-binary-type', // set accordingly processData: false }); 

Exemplo de baunilha em JavaScript:

 var file = $('#fileInput').get(0).files.item(0); // instance of File var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload.php', true); xhr.onload = function(e) { ... }; xhr.send(file); 

Concedido, se você estiver substituindo um formulário HTML multipart tradicional por uma implementação “AJAX” (ou seja, seu back-end consome dados de formulários com várias partes), você deseja usar o object FormData conforme descrito em outra resposta.

Fonte: Novos truques em XMLHttpRequest2 | Rochas HTML5

Consegui fazer com que o exemplo @yeeking funcionasse não usando FormData, mas usando o object javascript para transferir o blob. Funciona com um blob de som criado usando o recorder.js. Testado na versão 32.0.1700.107 do Chrome

 function uploadAudio( blob ) { var reader = new FileReader(); reader.onload = function(event){ var fd = {}; fd["fname"] = "test.wav"; fd["data"] = event.target.result; $.ajax({ type: 'POST', url: 'upload.php', data: fd, dataType: 'text' }).done(function(data) { console.log(data); }); }; reader.readAsDataURL(blob); } 

Conteúdo de upload.php

  

Eu tentei todas as soluções acima e, além disso, aqueles em respostas relacionadas também. Soluções que incluem, mas não se limitam a passar o blob manualmente para uma propriedade de arquivo HTMLInputElement, chamando todos os methods readAs * no FileReader, usando uma instância File como segundo argumento para uma chamada FormData.append, tentando obter os dados blob como uma string, obtendo os valores em URL.createObjectURL (myBlob) que resultaram desagradáveis ​​e travaram minha máquina.

Agora, se acontecer de você tentar esses ou mais e ainda achar que não é possível fazer o upload do seu blob, isso pode significar que o problema é do lado do servidor. No meu caso, meu blob excedeu o limite de http://www.php.net/manual/en/ini.core.php#ini.upload-max-filesize e post_max_size no PHP.INI, então o arquivo estava saindo do servidor, mas sendo rejeitado pelo servidor. Você poderia aumentar este valor diretamente no PHP.INI ou via .htaccess