How do I refresh the page after uploading images?

Question

I am using the following codes to upload images and then display them:

Here is the HTML:

<form id="formImage" style="display:none">
<input type="file" id="fileUpload" name="fileUpload[]" multiple onchange="saveImages()">
</form>

<div id="btnFake" style="background:#CCC; width:100px; height:100px; cursor:pointer;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<script src="http://malsup.github.com/jquery.form.js"></script> 

<script>
document.getElementById('btnFake').addEventListener('click', function(){
document.getElementById('fileUpload').click();
});

function saveImages()
{
$('#formImage').ajaxSubmit({
url : 'multiple-upload-ajax.php',
type : 'POST'        
});
}
</script>

Here, Multiple-upload-ajax.php:

    <?php

if(isset($_FILES['fileUpload']))
{
require 'WideImage/WideImage.php';
date_default_timezone_set("Brazil/East");

$name = $_FILES['fileUpload']['name'];
$tmp_name = $_FILES['fileUpload']['tmp_name'];

$allowedExts = array(".gif", ".jpeg", ".jpg", ".png", ".bmp");

$dir = '../img/empreendimentos/1/galeria/';
    echo "<script type='text/javascript'>location.reload(true)</script>";

for($i = 0; $i < count($tmp_name); $i++)
{
$ext = strtolower(substr($name[$i],-4));

if(in_array($ext, $allowedExts))
{
$new_name = date("Y.m.d-H.i.s") ."-". $i . $ext;

$image = WideImage::load($tmp_name[$i]);

$image = $image->resize(170, 180, 'outside');
$image = $image->crop('center', 'center', 170, 180);

$image->saveToFile($dir.$new_name);


}
}
}

?>

Then I display the images that are in the folder, as in this example:

<?php          
                $idEmpreendimento = "1";
                $stringTratada = "Fotos Album";
                $image_name = "Nome da imagem";
                $stringAlbum  = '../img/empreendimentos/' . $idEmpreendimento . '/galeria' .'/*.*';
                $files = glob($stringAlbum);
                //$files = glob("img/empreendimentos/1/*.*");
                for ($i=0; $i<count($files); $i++) { 
                    $num = $files[$i]; echo '<a href="'.$num.'" data-lightbox="'.$stringTratada.'" data-title="'.$image_name/*["nome"]*/.'"><img alt="random image" src="'.$num.'" /></a>'; 
                }
            ?>

I’ve tried several possible ways, but I haven’t been able to refresh the page as soon as I send a new image. Rent has some suggestion of php or javascript and WHERE exactly I would put this code?

Answer 1

In jQuery also has the callback complete, it will be executed even in the presence of errors, unlike the Success which will be executed only if all goes well.

$('#formImage').ajaxSubmit({
   url : 'multiple-upload-ajax.php',
   type : 'POST',
   complete : function(){
      location.reload();
   }   
});

Answer 2

Try adding a success at the end of your call

Example:

$('#formImage').ajaxSubmit({
   url : 'multiple-upload-ajax.php',
   type : 'POST',
   success : function(){
      location.reload();
   }   
});