I'm having a problem to upload the audio file to the server side page. Here are the codes. I can record and download the files but the issue is that I cant upload the following files to the upload.php. I'm currently using xampp. Can anyone help me please? Javascript:
var upload = document.createElement('a');
upload.href="#";
upload.innerHTML = "Upload";
upload.addEventListener("click", function(event){
var xhr=new XMLHttpRequest();
xhr.onload=function(e) {
if(this.readyState === 4) {
console.log("Server returned: ",e.target.responseText);
}
};
var fd=new FormData();
fd.append("audio_data",blob, filename);
xhr.open("POST","upload.php",true);
xhr.send(fd);
});
li.appendChild(document.createTextNode (" ")); //add a space in between
li.appendChild(upload); //add the upload link to li
//add the li element to the ol
recordingsList.appendChild(li);
}
php:
<?php
print_r($_FILES); //this will print out the received name, temp name, type, size, etc.
$size = $_FILES['audio_data']['size']; //the size in bytes
$input = $_FILES['audio_data']['tmp_name']; //temporary name that PHP gave to the uploaded file
$output = $_FILES['audio_data']['name'].".wav"; //letting the client control the filename is a rather bad idea
//move the file from temp name to local folder using $output name
move_uploaded_file($input, $output)
?>
html:
<div id="controls">
<button id="recordButton">Record</button>
<button id="pauseButton" disabled>Pause</button>
<button id="stopButton" disabled>Stop</button>
</div>
<div id="formats">Start</div>
<h3>Recordings</h3>
<ol id="recordingsList"></ol>
