Getting a file through ajax - php

Question

I have a script in which I need to process a file using ajax. Everything in the script works, except I can not get the right variable. I have tried everything and I currently have this in its place
title = "<?php echo $_FILES["file"]["name"] ?>";
I was wondering if anyone could tell me how to successfully set whatever is in this field
<label for="file">Thumbnail Pic:</label>
</td>
<td>
<input type="file" name="thumbnail" id="thumbnail" />
As a variable in the ajax script that I have. All help is extremely appreciated, thanks for the help!
<script language='javascript' type='text/javascript'>
function ajaxupload(){
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
try{
ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e){
// Something went wrong
alert('Your browser broke!');
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById('response');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var songtitle = document.getElementById('songtitle').value;
var thumbnail = document.getElementById('thumbnail').value;
var name = document.getElementById('file').value;
var title = "<?php echo $_FILES["file"]["name"] ?>";
var description = document.getElementById('description').value;
var params= 'songtitle=' + songtitle + '&thumbnail=' + thumbnail + '&title=' + title + '&description=' + description + '&name=' + name;
ajaxRequest.open("POST", 'ajaxupload.php', true);
ajaxRequest.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajaxRequest.send(params);
}
</script>
<div id="centered2">
<h1>Music Upload</h1>
<div id="centered">
<table>
<tr>
<td>
<h4><br><?php
echo $echovar10;
echo $echovar20;
echo $echovar40;
echo $echovar50;
echo $echovar60;
echo $echovar120;
echo $echvoar130;
?><div id='response'></h4>
<table>
<tr>
<td>
<label for="file">Choose a song:</label>
</td>
<td>
<input type="file" name="file" id="file"/>
</td>
</tr>
<br />
<tr>
<td>
<label for="file">Thumbnail Pic:</label>
</td>
<td>
<input type="file" name="thumbnail" id="thumbnail" />
<br />
</td>
</tr>

Answer 1

I would really recommend you use jQuery. It'll make your life alot easier. Here's the ajax function documentation. jQuery also provides some wonderfully simple wrapper functions for get and post methods. Google hosts the code (minified) which is convenient.
$.post(
'ajaxupload.php', // url
$("#form_id").serialize(), // data
function(data) { // return function on success
alert(data);
}
);
But as for the real reason you are here, looks like a simple typo.
title = "<?php echo $_FILES['thumbnail']['name'] ?>";