Miniatura no upload de imagem

[rafa2098 1]

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');

[Flávio Douglas Nunes 5]

É 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