Ajax file upload problem

[wannes]

I'm trying to upload a file using ajax, but I have some problems.

First I'll show the code :

 

HTML

<form id="foto" action="index.php?action=send" method="post" enctype="multipart/form-data">
	<fieldset>
		<label>Kleur</label>
		<input id="Binded" type="text" value="ffffff" />
    		<br />
		<label>Upload foto</label>
        	<input id="file" type="file" name="upload" id="upload"/>
        	<a href="index.php?action=foto" id="uploaden">uploaden</a>
	</fieldset>
<fieldset id="audioplayer">
<h3>Kies een soundtrack</h3>
<ol id="lijst">
      	<li id="een" class="active"><a href="assets/audio/Gayla_Peevey-I_Want_a_Hippopotamus_For_Christmas.mp3">Gayla Peevey - I Want a Hippopotamus For Christmas</a>
      	<img class="mute" src="assets/images/mute.png" width="30" height="30" alt="mute"/></li>
      	<li id="twee"><a href="assets/audio/SouthFamilyXmas2005-NuttinForChristmas.mp3">South Family - Nuttin for Christmas</a>
      	<img class="mute" src="assets/images/mute.png" width="30" height="30" alt="mute"/></li>
      	<li id="drie"><a href="assets/audio/southpark_merry_christmas.mp3">South Park - Merry Christmas</a>
      	<img class="mute" src="assets/images/mute.png" width="30" height="30" alt="mute"/></li>
      	</li>
   	</ol>
   	
   	<audio id="audio" preload="auto" autobuffer autoplay src="assets/audio/Gayla Peevey - I Want a Hippopotamus For Christmas.mp3">
</audio>
   	
</fieldset>
<fieldset id="emailen">
<h3>Email een vriend</h3>
<br />
<input type="email" name="email"  placeholder="Email" required="true" />
<input type="submit" name="verstuur" id="verstuur" value="Verstuur" />
</fieldset>
</form>

 

PHP

function getAjaxContent(){

	global $smarty;

	$dir = "uploads";
        $tempdir = $_FILES['upload']["tmp_name"];
       	$realdir = $dir."/".$_FILES["upload"]["name"];
        //$fotoTonen = '<img src="'.$realdir.'" alt="foto upload">';
        //$toonFoto = true;

        if(!is_dir($dir)){
            mkdir($dir);
        }

        move_uploaded_file($tempdir, $realdir);

	var_dump($_FILES);

	return  $smarty->fetch('kaart-ajax.htm');

}

Here I get the error <b>Notice</b>:  Undefined index:  upload in <b>/Applications/MAMP/htdocs/2011-2012/kerstkaart/includes/index.php</b> on line <b>16</b><br /> and the var_dump gives an empty array

 

AJAX

$('input[name=foto]').change(function(event){
    	
    	$.ajax({
        url:"index.php?action=foto",
        data: $('input[type=file]').val(),
        type: "POST",
        timeout: 3000,
        error: function(jqXHR, textStatus,errorThrown){
            alert("probleem met ajax "+textStatus);
        },
        success: function(data, textStatus, jqXHR){


            alert("jaja "+data);

		canvas.width = canvas.width;
		context.drawImage(image, 0, 0);
		image.src = 'uploads/'+data;
       
        }
     	});
    	
    	
    	event.preventDefault();
    	
    });

 

What I try to do here is getting the value of the selected file and redraw my canvas ( HTML5 ) so that the chosen pic is the background.

The file i upload to test is a gif of 4KB, so not that big.

 

Can anyone help me with this confusing problem ?

Thanks,

[sw0o0sh]

It seems you're using jQuery.

[scootstah]

If you're already using jQuery, you  might as well just get Uploadify and make this super easy on yourself.