Getting a file through ajax

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>

Are you trying to actually upload the file or just send the filename? — simshaun, Dec 10 '11 at 00:22
I have the uploading script all set up, I just do not know how to pass the name of the file onto the file upload page. — Eggo, Dec 10 '11 at 00:26
You can't upload files through AJAX like that. There is a workaround that involves posting the form to an invisible iframe. I know you aren't using jQuery, but you may find something of use at http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery — simshaun, Dec 10 '11 at 00:42

savinger · Answer 1 · 2011-12-10T00:28:47.533

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

edited Dec 10 '11 at 00:28

answered Dec 10 '11 at 00:18

savinger

6,544
9
40
57

I guess that I could use jQuery, but quite literally I hate it. I just really do not understand it at all and would rather stick with some that I am used to and know how to use. JQuery just blows my mind; sorry to sound like a noob. But I will go ahead and take a look at these, thanks! – Eggo Dec 10 '11 at 00:22
So is that all that I write? I mean do I get rid of my current functions and just paste that over it? I don't understand how jQuery access the variables of the form. – Eggo Dec 10 '11 at 00:24
Yep, $("#form_id").serialize() should pass in your form data, once you change the form_id the the id of your form. And of course include your – savinger Dec 10 '11 at 00:33
1

Quick crash course in jQuery, $(something) is how we access elements in our html, where '#foo' gets the first element in the dom with an id of foo, and '.foo' returns an array of all the elements with a classname of foo. – savinger Dec 10 '11 at 00:36

Getting a file through ajax

1 Answers1