Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, tenho um formulario que nele contem um upload de imagem, porem gostaria que essas imagens aparecessem em miniatura antes de serem postadas, alguém conhece algum plugin ou uma forma de se fazer isso?
Form
<form enctype="multipart/form-data" action="php/postar.php" method="POST" name="form-postar">
<p class="titulo-postar"><b>O que deseja vender?</b></p>
<input type="text" name="titulo" placeholder="Ex: iPhone 5S 64GB Gold (Usado)">
<textarea name="desc" placeholder="Ex: iPhone 5S de 32GB, Cinza Espacial, Perfeitas condições com 6 meses de uso, aceito tanto venda quanto troca (algo do meu interesse)."></textarea>
<input type="text" style="width: 45%; display: inline;" name="valor" placeholder="Ex: R$ 3800,00">
<select name="tipo">
<option disabled>Tipo de operação</option>
<option value="Gratis">Gratis</option>
<option value="Venda">Venda</option>
<option value="Brique">Brique</option>
</select>
<input style="display: none;" type="file" id="input-file" name="fileUpload[]" multiple>
<div class="rodape-postar">
<i class="icon-camera input-file"></i>
</div>
<input type="hidden" name="data" value="<?= date("d/m/Y h:i"); ?>">
<input type="hidden" name="id_user" value="<?= $_SESSION['id']; ?>">
<button class="btn-postar">Postar</button>
</form>
Logar.php
<?php
require("conecta.php");
require("../wideimage/lib/WideImage.php");
date_default_timezone_set("America/Sao_Paulo");
$id = strip_tags($_POST['id_user']);
$data = strip_tags($_POST['data']);
$titulo = strip_tags($_POST['titulo']);
$descricao = strip_tags($_POST['desc']);
$tipo = strip_tags($_POST['tipo']);
$valor = strip_tags($_POST['valor']);
$sql = $pdo->prepare("INSERT INTO postagens (id, data_post, titulo_post, desc_post, tipo_post, valor_post)
VALUES (:id, :data, :titulo, :descricao, :tipo, :valor)");
$sql->bindValue(":id", $id, PDO::PARAM_INT);
$sql->bindValue(":data", $data, PDO::PARAM_STR);
$sql->bindValue(":titulo", $titulo, PDO::PARAM_STR);
$sql->bindValue(":descricao", $descricao, PDO::PARAM_STR);
$sql->bindValue(":tipo", $tipo, PDO::PARAM_STR);
$sql->bindValue(":valor", $valor, PDO::PARAM_STR);
$sql->execute();
$lastId = $pdo->lastInsertId();
if($sql){
$name = $_FILES['fileUpload']['name'];
$tmp_name = $_FILES['fileUpload']['tmp_name'];
$allowedExts = array(".gif", ".jpeg", ".jpg", ".png", ".bmp");
$dir = '../images/postagens/';
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(670, 680, 'outside');
//$image = $image->crop('center', 'center', 670, 680);
$image->saveToFile($dir.$new_name);
$sqlA = $pdo->prepare("INSERT INTO fotos_post (id_post, foto) VALUES (:idG, :foto)");
$sqlA->bindValue(":idG", $lastId, PDO::PARAM_STR);
$sqlA->bindValue(":foto", $new_name, PDO::PARAM_STR);
$sqlA->execute();
}
}
}else{
echo "Erro ao fazer a postagem!";
}
header('Location:../index.php');
É possivel fazer isso utilizando a API FileSystem
No entanto ela não roda em navegadores antigos, da uma olhada nesse link para ver o suporte entre os navegadores
http://caniuse.com/#feat=filereader
Aqui alguns exemplos de como utiliza-la para visualizar miniaturas das imagens
http://jsfiddle.net/hardiksondagar/t6UP5/light/
http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload