如何使用Ajax上傳文字和圖片

Question

我試圖創建一個注冊表單，用戶必須在其中提供其數據以及圖像。 我已附上我正在嘗試但無法實現的代碼片段，請幫助我。 我已經經歷過其他類似的問題，但是沒有一個人幫助過我。

  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> &nbsp; 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> &nbsp; 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> &nbsp; Sign Up'); }); } else{ $("#error1").fadeIn(1000, function(){ $("#error1").html('<div class="alert alert-danger"> <span class="glyphicon glyphicon-info-sign"></span> &nbsp; '+response+' !</div>'); $("#btn-signup").html('<span class="glyphicon glyphicon-log-in"></span> &nbsp; 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&nbsp;<span class="glyphicon glyphicon-log-in"></span>&nbsp;</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 />

歡迎使用編碼籠！
為了完成您的注冊，請

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));



 }  
}  


 } 



  ?>

Answer 1

在ajax調用中提供序列化表單數據之前，必須將表單中的圖像編碼為base64（不確定）