Eggo
Eggo

Reputation: 539

Getting a file through ajax

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>

Upvotes: 0

Views: 457

Answers (1)

savinger
savinger

Reputation: 6714

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'] ?>";

Upvotes: 1

Related Questions