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,
