Loading gif while Post files uploads to database - php

Question

I am trying to prompt a loading gif while the POST data and Files are being uploaded to the database. I did a research online and I saw couple of examples with my same issue which was solved but when I tried for example this Ajax and Jquery code, it just loads the gif and it just keeps spinning. I don't know if there is another way to do it without using Ajax but just php.
Here is the Ajax code I tried just below my form
<div id="loader"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var spinner = $('#loader');
$(function() {
$('form').submit(function(e) {
e.preventDefault();
spinner.show();
$.ajax({
url: 't2228.php',
data: $(this).serialize(),
method: 'post',
dataType: 'JSON'
}).done(function(resp) {
spinner.hide();
alert(resp.status);
});
});
});
and the t2228.php file to call my php code
<?php
include '../lib/session.php';
Session::checkSession();
include '../config/config.php';
include '../lib/database.php';
include '../helpers/format.php';
$db = new Database();
$fm = new Format();
define("DOCROOT", filter_input(INPUT_SERVER, "DOCUMENT_ROOT", FILTER_SANITIZE_STRING));
$pet = new Pet();
if($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit'])){
$addPet = $pet->petAdd($_POST, $_FILES);
}
?>
Here is the HTML Form
<form action="" method="post" enctype="multipart/form-data">
<table class="form">
<tr>
<td>
<label>Pet Name</label>
</td>
<td>
<input type="text" name="name" placeholder="Enter Pet Name..." class="medium" />
</td>
</tr>
<tr>
<td>
<label>Pet Price</label>
</td>
<td>
<input type="text" name="price" placeholder="Enter Pet Price..." class="medium" />
</td>
</tr>
<tr>
<td>
<label>Pet Serie</label>
</td>
<td>
<input type="text" name="serie" placeholder="Enter Pet Serie..." class="medium" />
</td>
</tr>
<tr>
<td>
<label>Pet Sex</label>
</td>
<td>
<select id="select" name="sex">
<option>Select Pet Sex</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>
<label>Pet Age</label>
</td>
<td>
<input type="text" name="age" placeholder="Enter Pet Age..." class="medium" />
</td>
</tr>
<tr>
<td>
<label>Upload Image</label>
</td>
<td>
<div class="post-image-collection">
<label id="list">
</label>
<label class="post-image post-image-placeholder mrm mts empty">
<input type="file" id="Photofile" name="images[]" required="required" multiple />
<span class="icon-camera"><img src="../img/608815-200.png"></span>
<p class="uppercase">Photo</p>
</label>
</div>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" name="submit" Value="Add Pet" />
</td>
</tr>
</table>
</form>
Here is My PHP code
public function petAdd($data, $file){
$name = mysqli_real_escape_string($this->db->link, $data['name']);
$price = mysqli_real_escape_string($this->db->link, $data['price']);
$serie = mysqli_real_escape_string($this->db->link, $data['serie']);
$sex = mysqli_real_escape_string($this->db->link, $data['sex']);
$age = mysqli_real_escape_string($this->db->link, $data['age']);
foreach($file["images"]["tmp_name"] as $key=>$tmp_name)
{
$file_name = $file["images"]["name"][$key];
$file_size = $file["images"]["size"][$key];
$file_temp = $file["images"]["tmp_name"][$key];
$file_size_preview = $_FILES['preview']['size'];
$div = explode('.', $file_name);
$file_ext = strtolower(end($div));
$permited = array('jpg', 'jpeg', 'png', 'gif');
if($tmp_name == ""){
$msg = "<span class='error'>Fields must not be empty!</span>";
return $msg;
}
elseif ($file_size > 1048567 || $file_size_preview > 1048567) {
$msg = "<span class='error'>Image Size should be less then 1MB! </span>";
return $msg;
}
elseif (in_array($file_ext, $permited) === false) {
$msg = "<span class='error'>You can upload only:-".implode(', ', $permited)."</span>";
return $msg;
}
}
if($name == "" || $price == "" || $serie == "" || $sex == "" || $age == "") {
$msg = "<span class='error'>Fields must not be empty!</span>";
return $msg;
} else{
$query = "INSERT INTO pets(name, price, serie, sex, age, status, details, shipping, type) VALUES('$name','$price','$serie', '$sex', '$age','$status', '$details','$shipping','$type')";
$inserted_row = $this->db->insert($query);
$last_id = $this->db->link->insert_id;
foreach($file["images"]["tmp_name"] as $key=>$tmp_name)
{
$div = explode('.', $file_name);
$file_ext = strtolower(end($div));
$unique_image = substr(md5(time()), 0, 10).'.'.$file_ext;
$uploaded_image = "../uploads/".$unique_image;
$saveToFolder = DOCROOT . "/dallasfrenchies/uploads/$unique_image";
$saveToDatabase = "uploads/$unique_image";
move_uploaded_file($tmp_name, $saveToFolder);
$query = "INSERT INTO images(petId, path) VALUES('$last_id','$saveToDatabase')";
$this->db->insert($query);
sleep(3);
}
$msg = "<span class='success'> Your Pet has been added Successfully. </span>";
return $msg;
}
}
Any one with a suggestion on what to modify or add?

Answer 1

<div id="loader"></div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var spinner = $('#loader');
$(function() {
$('form').submit(function(e) {
e.preventDefault();
spinner.show();
$.ajax({
url: 't2228.php',
data: $(this).serialize(),
method: 'post',
dataType: 'JSON',
success: function(resp) {
spinner.hide();
alert(resp.status);
},
error: function(resp) {
spinner.hide();
alert(resp);
}
})
});
});
Rather than .done() i used the attributes for success and error

Answer 2

Try below code and make few changes in ajax code. Add below parameters in your code.
processData: false,
contentType: false,
And add var formData = new FormData($(this)); line before ajax starts.
Or Check below code and make changes according to you code.
<script type="text/javascript">
$('form').submit(function (e) {
e.preventDefault();
var spinner = $('#loader');
var formData = new FormData($(this));
$.ajax({
url: 't2228.php',
type: "POST",
data: formData,
processData: false,
contentType: false,
beforeSend: function () {
spinner.show();
},
success: function (data)
{
spinner.hide();
},
error: function (resp) {
spinner.hide();
alert(resp);
}
});
});
</script>