将blob文件保存到服务器

Question

I am trying to saeve recorded file to the server. For recording purpose I am using demos recorder

At the end of recording it gives me a blob-link to the recorded file. So After googling a bit I found that I can use that bob url to save it.
Here is the link that talks about saving blobs. After that I am trynig to get it and download to server.

1- I get the link to blob file

var data = document.getElementById("save").href

After that I am using js code in my index.html file to send
blob url to php code.
JS code

<script>
function saveAudio(){
var req = null;
var url = "savefile.php";
var data = document.getElementById("save").href.toString();// document.getElementById("save").innerHTML;// = xhttp.responseText;;   // you have to check how to get the data from your saveAudio() method
window.alert(data);

(window.XMLHttpRequest) ? req = new XMLHttpRequest() : (window.ActiveXObject) ? req = new ActiveXObject("Microsoft.XMLHTTP") : req = false; 
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "multipart/form-data");

if(data != null) //&& data != "")
{
  req.setRequestHeader("Content-length", data.length);
  req.send(data);
}}


</script>

PHP code

<?php

$save_folder = dirname(__FILE__) ."/js";
if(! file_exists($save_folder)) {
    if(! mkdir($save_folder)) {
        die("failed to create save folder $save_folder");
    }
}

$key = 'filename';
$tmp_name = $_FILES["audiofile"]["tmp_name"];
$upload_name = $_FILES["audiofile"]["name"];
$type = $_FILES["audiofile"]["type"];
$filename = "$save_folder/$upload_name";
$saved = 0;
if(($type == 'audio/x-wav' || $type == 'application/octet-stream') && preg_match('/^[a-zA-Z0-9_\-]+\.wav$/', $upload_name) ) {

    $saved = move_uploaded_file($tmp_name, $filename) ? 1 : 0;
}

//name is needed to send in the php file

?>

I get 2 errors while compiling in browser
1-refused to set unsafe header "Content-length".
2-POST savefile.php 500

I suppose that there is something wrong with php file!
How canI handle these errors and accomplish uploading task?
Is there any open source which allows direct uploading blob-url to server without using php?
I appreciate any help and suggestion!

Answer 1

Try removing the line: req.setRequestHeader("Content-length", data.length);

XMLHttpRequest isn't allowed to set these headers because that would be a security vulnerability. The 500 is most likely a result of the request failure.

You can read about XMLHttpReqest here http://www.w3.org/TR/XMLHttpRequest/#the-setrequestheader%28%29-method

Here are some other threads, same issue:

Pass Blob through ajax to generate a file

How can javascript upload a blob?