如何使用ajax上传文本和图像

时间:2016-08-09 19:44:40

标签: javascript php jquery ajax

我正在尝试创建一个注册表单,用户必须将其数据与图像一起提供。我附上了我正在尝试但无法实现的代码片段,请帮助我。我已经遇到过其他类似的问题,但他们都没有帮助我。

 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 />

欢迎来到Coding Cage!
要完成注册,请

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



 }  
}  


 } 



  ?>

1 个答案:

答案 0 :(得分:0)

在ajax调用中提供序列化表单数据之前,必须将表单中的图像编码为base64(不确定)

相关问题