Pass Blob durch Ajax, um eine Datei zu erzeugen

Question

Ich versuche Audiorecorder (https://github.com/cwilso/AudioRecorder) zu erfassen und senden Sie den Blob über Ajax eine PHP-Datei, die den Blob-Inhalt erhalten und erstellen Sie die Datei (in diesem Fall die Wave-Datei).

Ajax-Aufruf:

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

und meine PHP-Datei (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: Ich bin Neuling mit Klecksen und Ajax. Vielen Dank im Voraus.

Answer 1

Versuchen Sie die Datei als Formulardaten

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

hochladen.

<?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

Nach dem documentation von XMLHttpRequest.send() können Sie sich das Blob Objekt direkt verwenden.

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

Ich habe das versucht und es funktioniert wie ein Charme.