AjaxでBlobを渡してファイルを生成する

Question

私はaudiorecorder（https://github.com/cwilso/AudioRecorder）をキャプチャし、blobの内容を受け取ってファイル（この場合はwaveファイル）を作成するAjaxのphpファイルを通してblobを送信しようとしています。

Ajax呼び出し：

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

と私の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：私は、ブロブとAjaxを使って初心者です。 ありがとうございます。

Answer 1

は、フォームデータ

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

はdocumentationによると、XMLHttpRequest.send()を使用することにより、あなたは直接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); 

私はこれを試しましたが、それは魅力的です。