Estou utilizando os seguintes códigos para fazer um upload de imagens e exibí-las em seguida:
Aqui, o 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>
Aqui, o 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);
}
}
}
?>
Depois, eu exibo as imagens que estão na pasta, como neste exemplo:
<?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>';
}
?>
Já tentei de várias formas possíveis, mas ainda não consegui dar um refresh na página assim que eu envio uma nova imagem. Alugém tem alguma sugestão de php ou javascript e ONDE exatamente eu colocaria este código?