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