Image upload Ajax PHP Mysql

325
November 23, 2016, at 3:45 PM

I am writing a code for image upload and want to implement AJAX for real time preview. As I have to upload four images on different button and they call different PHP file to upload in respective directory.

My code is working fine for single image upload as it needs to pass form ID. but not working for all four images.

Please help me out and provide solution.

Below is the code -

<script type="text/javascript"> 
$(document).ready(function (e) { 
	$("#upload").on('submit',(function(e) { 
		e.preventDefault(); 
		$.ajax({ 
        	url: "update_profile_img.php", 
			type: "POST", 
			data:  new FormData(this), 
			contentType: false, 
    	    cache: false, 
			processData:false, 
			success: function(data) 
		    { 
			$("#targetLayer").html(data); 
		    }, 
		  	error: function()  
	    	{ 
	    	} 	         
	   }); 
	})); 
}); 
 
 
</script>
 <div class="col-md-6"> 
              <!-- Horizontal Form --> 
              <div class="box box-info"> 
                <div class="box-header with-border"> 
                  <h3 class="box-title">Upload Documents</h3> 
                </div><!-- /.box-header --> 
                <!-- form start --> 
				 
               		<?php include('update_profile_img.php');?> 
               		<?php include('update_car_img.php');?> 
               		<?php include('update_licen_img.php');?> 
               		<?php include('update_doc_img.php');?> 
               		<p style="color:green"><?php echo $successMessage;?></p> 
			<p style="color:red"><?php echo $Error;?></p> 
                  <div class="box-body"> 
                     <form role="form" action="#"  id="upload" method="POST" enctype="multipart/form-data"> 
                     <div class="form-group"> 
                     <img class="form-control" style="width:100px; height:100px" alt="" src=<?php echo $target_file; ?> > 
                      <label for="exampleInputFile">Profile Image</label> 
					<input type="file" class="form-control" name="image" id="image" /> 
					<input type="hidden" class="form-control" name="user_id" value="<?php echo $user_id;?>" /> 
					 <button type="submit" name="profile_btn" class="btn btn-primary">Upload</button> <!--  --> 
                      <small>File should be in image format.</small> 
                      
                    </div> 
                    	 
						<div class="form-group"> 
					  <img class="form-control" style="width:100px; height:100px" alt="" src=<?php echo $target_file1;?> > 
                      <label for="exampleInputFile">Car Image</label> 
						<input type="file" class="form-control" name="car_image" id="car_image" />  
						<button type="submit" name="car_btn" class="btn btn-primary">Upload</button>  
                      <small>File should be in image format.</small> 
                       </div> 
					    
				 
					 <div class="form-group"> 
					 <img class="form-control" style="width:100px; height:100px" alt="" src=<?php echo $l_img;?> > 
                      <label for="exampleInputFile">Driving License</label> 
						<input type="file" class="form-control" name="drivelic" id="drivelic"/> 
						<button type="submit" name="licen_btn" class="btn btn-primary">Upload</button>   
                      <small>File should be in image format.</small> 
                       
                    </div> 
					 
					<div class="form-group"> 
					<img class="form-control" style="width:100px; height:100px" alt="" src=<?php echo $d_img;?> > 
                      <label for="exampleInputFile">Vehicle Documents</label> 
						<input type="file"  class="form-control" name="vehicledoc" id="vehicledoc"/> 
						<button type="submit" name="doc_btn" class="btn btn-primary">Upload</button>  
                      <small>File should be in image format.</small> 
                    </div> 
                     </form> 
                    <div class="box-footer"> 
				   
                  </div> 
                     
                  </div><!-- /.box-body --> 
                   
                </form> 
              </div><!-- /.box --> 
               
			   
 
                </div><!-- /.box-body --> 
               
            </div><!--/.col (right) --> 
          </div> <!-- /.row --> 
        </section><!-- /.content --> 
      </div><!-- /.content-wrapper -->

PHP code to upload profile image update_profile_img.php-

<?php 
include('../config/conn.php'); 
$Error =""; 
$successMessage =""; 
 
if (isset($_POST['profile_btn'])){ 
        if(!empty($_POST['user_id']) && !empty($_FILES['image'])) 
        { 
				if($_FILES['image'] != "jpg" && $_FILES['image'] != "png" && $_FILES['image'] != "jpeg" && $_FILES['image'] != "gif" && $_FILES["image"]["size"] > 2097152 )  
		        { 
				    //echo "6"; 
					$Error="Invalid Image!"; 
				} 
				else 
				{			$id=$_POST['user_id']; 
							$target_dir = "images/profile/"; 
							$db_dir = "images/profile/"; 
							$date=rand(0,999); 
							$datemd=md5($date); 
							$date=substr($datemd,2,-7); 
							//$unique_id=substr($date, 3, -3); 
 
							$target_file = $target_dir .$date. basename($_FILES["image"]["name"]); 
							$user_image = $db_dir .$date. basename($_FILES["image"]["name"]); 
								//$pic=addslashes (file_get_contents($_FILES['image']['tmp_name'])); 
							if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file))  
							{ 
									$sql = "UPDATE pooler SET image='$user_image' WHERE id='$id'"; 
 
											if ($conn->query($sql) === TRUE)  
										   { 
												 //echo "1"; 
												 $successMessage="Profile Image Updated Successfully!"; 
												 return '$target_file';  
 
											}  
											else  
											{ 
												  //echo "2"; 
												  $Error="Error in Updating Image!"; 
 
											} 
							} 
							else 
							{ 
									$Error="Image Not Inserted Properly!"; 
							} 
				 
				} 
         					 
									 
		} 
		else 
		{ 
			//echo "4"; 
			$Error="Fill The Required Fields!"; 
 
		} 
} 
 
?>

PHP code to upload car image 
 
<?php 
include('../config/conn.php'); 
$Error =""; 
$successMessage =""; 
 
if (isset($_POST['car_btn'])){ 
        if(!empty($_POST['user_id']) && !empty($_FILES['car_image'])) 
        { 
				if($_FILES['car_image'] != "jpg" && $_FILES['car_image'] != "png" && $_FILES['car_image'] != "jpeg" && $_FILES['car_image'] != "gif" && $_FILES["car_image"]["size"] > 2097152 )  
		        { 
				    //echo "6"; 
					$Error="Invalid Image!"; 
				} 
				else 
				{			$id=$_POST['user_id']; 
							$target_dir = "images/car/"; 
							$db_dir = "images/car/"; 
							$date=rand(0,999); 
							$datemd=md5($date); 
							$date=substr($datemd,2,-7); 
							//$unique_id=substr($date, 3, -3); 
 
							$target_file1 = $target_dir .$date. basename($_FILES["car_image"]["name"]); 
							$user_image = $db_dir .$date. basename($_FILES["car_image"]["name"]); 
								//$pic=addslashes (file_get_contents($_FILES['image']['tmp_name'])); 
							if (move_uploaded_file($_FILES["car_image"]["tmp_name"], $target_file1))  
							{ 
								$sql = "UPDATE pooler SET car_image='$user_image' WHERE id='$id'"; 
 
											if ($conn->query($sql) === TRUE)  
										   { 
												 //echo "1"; 
												 $successMessage="Car Image Updated Successfully!"; 
												 return 'target_file1'; 
 
											}  
											else  
											{ 
												  //echo "2"; 
												  $Error="Error in Updating Image!"; 
 
											} 
							} 
							else 
							{ 
									$Error="Image Not Inserted Properly!"; 
							} 
				 
				} 
         					 
									 
		} 
		else 
		{ 
			//echo "4"; 
			$Error="Fill The Required Fields!"; 
 
		} 
} 
 
?>

I also try to include all upload file code in one file and pass different Target_file variable as target_file and target_file1.

READ ALSO
Header animate on scroll in tablet Chrome issue

Header animate on scroll in tablet Chrome issue

I'm using Tympanus animate on scroll plugin to get my header shrink on scroll and it works great, the only issue that the plugin has is that even in it's demo, when you scroll on Chrome in tablet (Tested in iPad) it doesn't work until you fully stop scrolling,...

291
Disable or enable Show/hide columns in jqgrid

Disable or enable Show/hide columns in jqgrid

I have a datagrid in my page which is built using jqgrid. Here, I would like to disable an option called "Show/hide Columns" to my grid.

414
Add Class to one dropdown Remove Class From others

Add Class to one dropdown Remove Class From others

I have an overlay Menu that has 3 dropdowns. .

239
find all img tags inside html and move all to a certain div by jquery

find all img tags inside html and move all to a certain div by jquery

I have HTML code that contains images. [nnn]Now, I try to find all images inside this html and move them to another div.

306