I'm currently working on that script :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<?php
$path="upload/";
$path=$path.$_FILES['file_upload']['name'];
if(isset($_POST['upload']))
{
if(move_uploaded_file($_FILES['file_upload']['tmp_name'],$path))
{
echo'The file '.basename($_FILES['file_upload']['name']).' has been uploaded';
}
else
{
echo"There is an error";
}
}
?>
<form action="#" method="post" enctype="multipart/form-data">
<table width="384" border="1" align="center">
<tr>
<td width="108">Select File</td>
<td width="260"><label>
<input type="file" name="file_upload">
</label></td>
</tr>
<tr>
<td><label>
<button id=clickToUpload type="submit" name="upload">Upload File</button>
</label></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
and it's working as it should.
Now, I want to be able to do the same exact thing with jQuery...
<script src="js/jquery.js"></script>
<script>
$('#clickToUpload').click(function(event)
{
event.preventDefault();
$.ajax({
type: 'POST',
url: "post.php",
success: function(data)
{
}
});
});
</script>
This is my post.php page (as the same as in the index.php which was working)
$path="upload/";
$path=$path.$_FILES['file_upload']['name'];
if(isset($_POST['upload']))
{
if(move_uploaded_file($_FILES['file_upload']['tmp_name'],$path))
{
echo'The file '.basename($_FILES['file_upload']['name']).' has been uploaded';
}
else
{
echo"There is an error";
}
}
But with ajax it seems like it's not working :(
What could possibly be the reason for that ?
You have to explicitly include the form data with the call.
Try this:
var fd = new FormData($("form"));
$.ajax({
type: 'POST',
url: "post.php",
data:fd,
contentType: false,
processData: false,
success: function(data)
{
}
});