upload fihier en php avec ajax

bonjour,
j'ai créé un systeme d'upload de photo avec ajax lors de j'ajout de la première photo tout ce passe bien mon image de chargement s'affiche jusqu'à la fin de l'upload je vide le formulaire et mon bouton propose à nouveau de choisir un fichier et ma liste de photo mise à jour s'affiche
par contre à l'ajout d'une seconde photo l'image de chargement s'arrête avant la fin de l'upload
Voici moi javascript pour ajax:

$(document).ready(function (e) {
    $("#uploadForm").on('submit',(function(e) {
        e.preventDefault();
        $.ajax({
            url: "connection.php",
            type: "POST",
            data:  new FormData(this),
            beforeSend: function(){$("#body-overlay").show();},
            contentType: false,
            processData:false,
            success: function(data)
            {
            $("#targetLayer").html(data);
            $("#targetLayer").css('opacity','1');
            setInterval(function() {$("#body-overlay").hide(); },500);
            document.forms['uploadForm'].reset();
            the_return.innerHTML = '<div style="text-align: center;" class="file-return"><label for="my-file" class="input-file-trigger" tabindex="0">Sélectionner une photo...</label></div>';
            },
            error: function() 
            {
            }           
       });
    }));
});

ensuite mon formulaire:

<form id="uploadForm" action="connection.php" method="post">

<div id="targetOuter">

<div id="targetLayer">

<?php include "".$_SERVER['DOCUMENT_ROOT']."/include/affiche_photo.php"; ?>

</div>

</div><div>

<div class="input-file-container">
  <input class="input-file" id="my-file" type="file" name="avatar">
  <input type="hidden" name="action" value="ereg_photo">

</div>
<div style="text-align: center;" class="file-return"><label for="my-file" class="input-file-trigger" tabindex="0">Sélectionner une photo...</label></div>

<script>
// ajout de la classe JS à HTML
document.querySelector("html").classList.add('js');

// initialisation des variables
var fileInput  = document.querySelector( ".input-file" ),  
    button     = document.querySelector( ".input-file-trigger" ),
    the_return = document.querySelector(".file-return");

// action lorsque la "barre d'espace" ou "Entrée" est pressée
button.addEventListener( "keydown", function( event ) {
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
        fileInput.focus();
    }
});

// action lorsque le label est cliqué
button.addEventListener( "click", function( event ) {
   fileInput.focus();
   return false;
});

// affiche un retour visuel dès que input:file change
fileInput.addEventListener( "change", function( event ) {  
    the_return.innerHTML = '<button class="btn" type="submit">Enregistrer la photo</button>';  
});
</script>

</form>

mon systeme d'affiche des photos:
c'est sur cette page que seras apellé mon image de chargement

<div class="photo">
<?php            
$si_photo = mysql_query("SELECT photos FROM membres WHERE pseudo='".$_SESSION['pseudo']."'") or die (mysql_error());
list($a_photo) = mysql_fetch_row($si_photo);

if ($a_photo == "non")
{
echo '<br><br><h3 style="text-align: center;">Vous n\'avez pas encore de photos, vous pouvez en ajouter ci-dessous</h3>';

}

else
{

$i_photo = 0;

$select_photo = "SELECT adresse,id_photo FROM photos WHERE pseudo='".$_SESSION['pseudo']."' ORDER BY id_photo ASC";
$result_photo = mysql_query($select_photo)  or die ('Erreur : '.mysql_error());

echo '<ul>';

while($data_photo = mysql_fetch_array($result_photo))
{

if ($i_photo > 0 && $i_photo % 9 == 0)
{
echo '</ul><ul>';
}
echo '<li><a href="clients.php?action=supp&id_photo='.$data_photo['id_photo'].'">';

echo '<img src="/photos/'.$data_photo['adresse'].'" alt=""></a>';

echo"</li>";
$i_photo++;

}

if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}
if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}
if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}
if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}
if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}
if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}
if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}
if ($i_photo % 9 != 0)
{
echo '<li><div class="blanck2"></div></li>';
$i_photo++; 
}

echo '</ul>';

}

?>

<div id="body-overlay"><div><img src="/images/loading.gif" width="64px" height="64px"/></div></div>

donc à la validation j'apelle cette page qui se charge d'uploader les photos et de réafficher les photos mises à jour
et c'est la que ça coince car si je veux ajouter une nouvelle photo l'image de chargement s'arrête avant la fin du script d'upload

<?php
session_start(); 

include "".$_SERVER['DOCUMENT_ROOT']."/include/mysql_connect.php";

if ($_POST['action'] == "ereg_photo")
{

//$_FILES['icone']['name']     //Le nom original du fichier, comme sur le disque du visiteur (exemple : mon_icone.png).
//$_FILES['icone']['type']     //Le type du fichier. Par exemple, cela peut être « image/png ».
//$_FILES['icone']['size']     //La taille du fichier en octets.
//$_FILES['icone']['tmp_name'] //L'adresse vers le fichier uploadé dans le répertoire temporaire.
//$_FILES['icone']['error']    //Le code d'erreur, qui permet de savoir si le fichier a bien été uploadé.

$dossier = '/home/alf234/public_html/photos/';
$fichier = basename($_FILES['avatar']['name']);
$taille_maxi = 2000000;
$taille = $_FILES['avatar']['size'];
$extensions = array('jpg', 'jpeg', 'png');
$extension = substr($_FILES['avatar']['type'], 6); 
$unique = mt_rand(1,500).str_shuffle(md5(uniqid().time()));
$fichier = "".$unique.".".$extension."";

$erreur = 0;

if (!in_array($extension, $extensions)) 
{
$affiche_erreur = 'Vous devez uploader un fichier de type png, jpg, jpeg...';
$erreur = $erreur+1;
}

if ($taille > $taille_maxi) 
{ 
$affiche_erreur = 'Le fichier est trop gros...';
$erreur = $erreur+1;
}

if($erreur == 0) //S'il n'y a pas d'erreur, on upload
{
     //On formate le nom du fichier ici...
     $fichier = strtr($fichier, 
          'ÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÒÓÔÕÖÙÚÛÜÝàáâãäåçèéêëìíîïðòóôõöùúûüýÿ', 
          'AAAAAACEEEEIIIIOOOOOUUUUYaaaaaaceeeeiiiioooooouuuuyy');
     $fichier = preg_replace('/([^.a-z0-9]+)/i', '-', $fichier);
     if(move_uploaded_file($_FILES['avatar']['tmp_name'], $dossier . $fichier)) //Si la fonction renvoie TRUE, c'est que ça a fonctionné...
     {

mysql_query("UPDATE membres SET photos='oui' WHERE pseudo='".$_SESSION['pseudo']."'");

$ereg_photo = "INSERT INTO photos (pseudo,adresse,id_photo) VALUES ('".$_SESSION['pseudo']."','".$fichier."','1')";
mysql_query($ereg_photo) or die('Erreur SQL !'.$ereg_photo.'<br>'.mysql_error());

     }

}
else
{
     ?>
     <script>

        swal({
        position: 'center', 
        type: 'error', 
        title: 'Oops...', 
        text: '<?php echo $affiche_erreur; ?>',       
        showConfirmButton: false, 
        timer: 3000
        })

</script>
     <?php
}

}

include "".$_SERVER['DOCUMENT_ROOT']."/include/affiche_photo.php"; 
?>