Prześlij blob przez ajax, aby wygenerować plik

Question

Próbuję przechwycić audiorecorder (https://github.com/cwilso/AudioRecorder) i wysłać blob przez Ajax plik php, który otrzyma zawartość blob i utworzy plik (w tym przypadku plik wave).

Ajax wywołanie:

audioRecorder.exportWAV(function(blob) { 
     var url = (window.URL || window.webkitURL).createObjectURL(blob); 
     console.log(url); 
     var filename = <?php echo $filename;?>; 
     $.ajaxFileUpload({ 
     url : "lib/vocal_render.php", 
     secureuri  :false, 
     dataType : blob.type, 
     data: blob, 
     success: function(data, status) { 
      if(data.status != 'error') 
      alert("boa!"); 
     } 
     }); 
    }); 

i mój plik php (vocal_render.php):

<?php 

if(!empty($_POST)){ 
    $data = implode($_POST); //transforms the char array with the blob url to a string 
    $fname = "11" . ".wav"; 

    $file = fopen("../ext/wav/testes/" .$fname, 'w'); 
    fwrite($file, $data); 
    fclose($file); 
}?> 

P.S: Jestem nowicjuszem z bąble i AJAX. Z góry dzięki.

Answer 1

Spróbuj przesłać plik jako danych formularzy

audioRecorder.exportWAV(function(blob) { 

     var url = (window.URL || window.webkitURL).createObjectURL(blob); 
     console.log(url); 

     var filename = <?php echo $filename;?>; 
     var data = new FormData(); 
     data.append('file', blob); 

     $.ajax({ 
     url : "lib/vocal_render.php", 
     type: 'POST', 
     data: data, 
     contentType: false, 
     processData: false, 
     success: function(data) { 
      alert("boa!"); 
     },  
     error: function() { 
      alert("not so boa!"); 
     } 
     }); 
}); 

.

<?php 

if(isset($_FILES['file']) and !$_FILES['file']['error']){ 
    $fname = "11" . ".wav"; 

    move_uploaded_file($_FILES['file']['tmp_name'], "../ext/wav/testes/" . $fname); 
} 
?> 

Answer 2

Według documentation, używając XMLHttpRequest.send() można użyć bezpośrednio z przedmiotu Blob.

var blob = new Blob(chunks, { 'type' : 'audio/webm' }); 
var xhr = new XMLHttpRequest(); 
xhr.open('POST', '/speech', true); 
xhr.onload = function(e) { 
    console.log('Sent'); 
}; 
xhr.send(blob); 

Próbowałem tego i działa jak urok.