Index.php
<link href="css/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script language="JavaScript" src="js/jquery.validationEngine.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function(){
jQuery("#formID").validationEngine();
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading1...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>
<style>
.preview { float: left;
width: 57px;}
</style>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<div class="form-container form-main-bg" style="margin-top:40px;">
<form id="imageform" name="imageform" method="post" enctype="multipart/form-data" action="ajax_upload_profile_image.php">
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>
<form id="formID" name="formID" method="post" action="edit_profile.php">
<input type="hidden" name="hid_id" id="hid_id" value="<?php echo $_SESSION['UserId']; ?>" />
<div class="row">
<div class="left">About</div>
<div class="right">
<textarea id="about" name="about" id="about"><?php echo $u_data[0]->vCode; ?></textarea>
</div>
<div class="row">
<div class="left">Location</div>
<textarea id="location" name="location"><?php echo $u_data[0]->vCode; ?></textarea> </div>
<div class="row">
<div class="left">Gender</div>
Male <input type="radio" name="gender" id="gender" value="male" />
Female <input type="radio" name="gender" id="gender" value="female" />
<div class="clear"></div>
</div>
<!- Other rows here -->
<div style="text-align:center; margin-top:20px;">
<input name="submit" id="submit" type="submit" class="submit-btn" value="Update" />
</div>
</form>
</div>
ajax_upload_profile_image.php
<?php
session_start();
$session_id= $_SESSION['UserId'];
require_once('includes/config.inc.php');
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$path = "images/profile/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
$query=("UPDATE users SET image='$actual_image_name' WHERE user_id='$session_id'");
$result = mysql_query($query) or die();
if($result)
{
echo "success";
}
else
{
echo "fail";
}
echo "<img src='images/profile/".$actual_image_name."' class='preview'>";
}
else
echo "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>
The following code is not working. Database is updated when sending data directly to php script using form action but when sent to php script through AJAX function the database is not updated but I receive success message.
the type by default is GET in the .ajaxForm plugin.
Add a type:"POST"
key in the options.
Try to move session_start();
to index.php