I was trying to create a signup form where a user has to give his data along with the image. I have attached the snippet of the code I was trying but couldn't achieve please help me. I have already been through other similar question but none of them helped me.
function submitForm1()
{
var data = $("#signup").serialize();
$.ajax({
type : 'POST',
url : 'signup_process.php',
data : data,
async: false,
beforeSend: function()
{
$("#error1").fadeOut();
$("#btn-signup").html('<span class="glyphicon glyphicon-transfer"></span> Signing Up..Please wait.');
},
success : function(response)
{
if(response=="ok"){
$("#error1").fadeIn(1000, function(){
$("#error1").html('<div class="alert alert-success"> <span class="glyphicon glyphicon-info-sign"></span> An Email has been sent to your entered email address. Please follow the instruction to activate your account.</div>');
$("#btn-signup").html('<span class="glyphicon glyphicon-transfer"></span> Sign Up');
});
}
else{
$("#error1").fadeIn(1000, function(){
$("#error1").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> '+response+' !</div>');
$("#btn-signup").html('<span class="glyphicon glyphicon-log-in"></span> Sign In');
});
}
}
cache: false,
contentType: false, //must, tell jQuery not to process the data
processData: false,
});
return false;
}
/* login submit */
});<div class="container">
<div class="signup-form-container">
<form id="signup" name="form1">
<div class="head"></div>
<div class="form-header" style="text-align:center;">
<div class="image" id="preview">
<div id="timelineShade" style="background:url(assets/pic.png) center;"></div>
</div>
<h3 class="form-title" style="margin-top:-60px;"><span style="margin-right:50px;"></span>Recruiter Sign-up Portal</h3>
</div>
<div class="form-body">
<!-- json response will be here -->
<div id="error1"></div>
<!-- json response will be here -->
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
<input type="text" name="name" class="form-control" placeholder="Full Name" id="name" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
<input type="text" name="email" class="form-control" placeholder="Email" id="email" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="row">
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input type="password" name="password" id="password" class="form-control"placeholder="Password" /> </div>
<span class="help-block" id="error"></span>
</div>
<div class="form-group col-lg-6">
<div class="input-group">
<div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
<input type="password" name="cpassword" class="form-control" placeholder="Confirm Password"/> </div>
<span class="help-block" id="error"></span>
</div>
</div>
<div class="form-group col-lg-6" style="max-width:145px; margin-top:10px;">
<div class="input-group">
<label>Company Logo</label>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="imagein" name="image" type="file" class="form-control" limit=1/>
</div>
<span class="help-block" id="error"></span>
</div>
</div>
<div class="form-footer">
<button type="submit" name="btn-signup" id="btn-signup" class="btn bt-login" style="margin-left:8%; width:92%" >Sign-up <span class="glyphicon glyphicon-log-in"></span> </button>
</div>
<div class="form-footer"> <div class="col-xs-4 col-sm-4 col-md-4" style="margin-left:0%; float:left;">
<i class="fa fa-lock"></i>
<a href="#" id="forget_link" class="forgetpass-tab"> Forgot password? </a> </div>
<div class="col-xs-4 col-sm-4 col-md-4" style="margin-left:0%; float:right;">
<i class="fa fa-user"></i>
<a href="#" id="login_tab" class="signup-tab"> Log-In </a> </div>
</div>
</form>
</div>
</div><?php
session_start();
$upload_dir = '/upload/'; // upload directory
error_reporting(0);
require_once 'class.user.php';
$reg_user = new USER();
if($reg_user->is_logged_in()!="")
{$reg_user->redirect('home.php');}if(isset($_POST['btn-signup'])){
$phone = trim($_POST['phone']);$email = trim($_POST['email']);
$upass = trim($_POST['password']);$code = md5(uniqid(rand()));
$imgExt = strtolower(pathinfo($imgFile,PATHINFO_EXTENSION));
$valid_extensions = array('jpeg', 'jpg', 'png', 'gif');
$userpic = rand(1000,1000000).".".$imgExt;
if(in_array($imgExt, $valid_extensions)){if($imgSize < 5000000){
move_uploaded_file($tmp_dir,$upload_dir.$userpic);}else{
$errMSG = "Sorry, your file is too large.";}}else{
$errMSG = "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";}
if($reg_user->register($phone,$email,$upass,$code,$userpic)){
$id = $reg_user->lasdID();$key = base64_encode($id);$id = $key;
$message = "Hello $email,<br /><br />
Welcome to Coding Cage!
To complete your registration please , just
clickfollowing link<br/><br /><br /><a href='http://localhost/x/verify.php?
id=$id&code=$code'>Click HERE to Activate :)</a><br /><br />Thanks,";
$subject = "Confirm Registration";require_once('mailer/class.phpmailer.php');
$mail = new PHPMailer();$mail->IsSMTP(); $mail->SMTPDebug = 0;
$mail->SMTPAuth = true; $mail->SMTPSecure = "ssl";
$mail->Host= "smtp.gmail.com"; $mail->Port= 465;
$mail->AddAddress($email);
$mail->Username="sharma.himanshu0405@gmail.com";
$mail->Password="mypassword";
$mail->SetFrom('sharma.himanshu0405@gmail.com','Himanshu');
$mail->Subject = $subject;
$mail->Subject = $subject; $mail->MsgHTML($message);
if($mail->send()) { echo "ok" ; } else {
echo "Sorry, Registration is not possible this time. Please try again after some time or Contact Admin";
$stmt = $reg_user->runQuery("DELETE FROM tbl_users WHERE user_email=:email_id");
$stmt->execute(array(":email_id"=>$email));
}
}
}
?>
</div>
Have to encode the image in the form to base64 (not sure) before providing serialized form data in ajax call