How do I refresh the page after uploading images?

Question

How do I refresh the page after uploading images?

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I'm using the following codes to upload and display images:

Here, 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><scriptsrc="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 have tried in many ways possible, but I have not yet been able to refresh the page once I submit a new image. Is there any suggestion of php or javascript and WHERE exactly would I put this code?

php javascript file-upload multiple-file-upload

asked by anonymous 15.10.2014 / 02:42

2 answers

ASP.NET Membership: Exchange Framework 3.5 to 4.5 Trigger for a Select

score 2 · Answer 1

In jQuery also has the complete callback, it will be executed even in the presence of errors, as opposed to success that will only run if all goes well. >

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

score 0 · Answer 2

Try adding success at the end of your call

Example:

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