10

Como faço um código para enviar uma imagem ao selecioná-la durante o cadastro? E após enviada aparecer no formulário uma miniatura, para então o usuário continuar preenchendo o restante do formulário.

Semelhante ao que é feito nesse link.

3
  • Por favor, reformule sua questão, está muito difícil de entender, a única forma de entendimento é visualizando o link porém perguntas/respostas que dependem de um link não são bem vindas aqui no SOpt. Commented 13/02/2014 às 10:22
  • 1
    Reformule sua questão para um melhor entendimento. Commented 13/02/2014 às 10:34
  • você ja tem uma função de upload de imagem? Commented 13/02/2014 às 10:54

2 Respostas 2

15

Para que consigas fazer upload de uma imagem para o servidor e após o envio com sucesso apresentar a mesma, precisas fazer uso de Ajax e preferencialmente um plugIn que já cuide de todo o trabalho de interagir com o servidor.

Código

Segue o código essencial para a criação de um formulário em HTML e um ficheiro no lado do servidor para lidar com a chegada dos ficheiros e controlar minimamente os mesmos:

HTML

Este ficheiro, será o index.php onde temos o HTML necessário para apresentar um formulário ao visitante, bem como incluir o jQuery e o jQuery Form Plugin modificado por Arun Sekar.

<!doctype html>
<html>
<head>
  <title>Ajax Image Upload </title>

  <style type="text/css">
    body {
      font-family:sans-serif;
    }
    #preview {
      color:#cc0000;
      font-size:12px
    }
    .imgList {
      max-height:150px;
      margin-left:5px;
      border:1px solid #dedede;
      padding:4px;
      float:left;
    }
  </style>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.wallform.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {

      $('#photoimg').die('click').live('change', function() {

        $("#imageform").ajaxForm({
          target: '#preview',
          beforeSubmit: function(){
            console.log('Antes de enviar');
            $("#imageloadstatus").show();
            $("#imageloadbutton").hide();
          },
          success:function(){
            console.log('Envio com sucesso');
            $("#imageloadstatus").hide();
            $("#imageloadbutton").show();
          },
          error:function(){
            console.log('Erro ao realizar operação');
            $("#imageloadstatus").hide();
            $("#imageloadbutton").show();
          }
        }).submit();
      });
    });
  </script>
</head>
<body>
  <div>
    <div id='preview'></div>
    <form id="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both">
      <h1>Escolha as imagens a carregar</h1>
      <div id='imageloadstatus' style='display:none'>
        <img src="loader.gif" alt="A carregar....">
      </div>
      <div id='imageloadbutton'>
        <input type="file" name="photos[]" id="photoimg" multiple="true">
      </div>
    </form>
  </div>
</body>
</html>

PHP

Este ficheiro será o ajaxImageUpload.php com o qual o PlugIn de jQuery vai interagir para enviar os dados da fotografia e receber informação se a mesma foi carregada com sucesso para o servidor, de forma a poder apresentar a mesma ao visitante sem o refresh da página.

<?php
error_reporting(0);
session_start();

define("MAX_SIZE","9000");

function getExtension($str) {

    $i = strrpos($str,".");

    if (!$i) {
        return "";
    }

    $l = strlen($str) - $i;

    $ext = substr($str,$i+1,$l);

    return $ext;
}

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

if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {

    $uploaddir = "uploads/"; // directoria que vai receber os ficheiros

    foreach ($_FILES['photos']['name'] as $name => $value) {

        $filename = stripslashes($_FILES['photos']['name'][$name]);

        $size=filesize($_FILES['photos']['tmp_name'][$name]);

        /* Recolhe extensão do ficheiro em caixa baixa (lowercase)
         */
        $ext = getExtension($filename);
        $ext = strtolower($ext);

        if (in_array($ext,$valid_formats)) {

            if ($size < (MAX_SIZE*1024)) {

                $image_name=time().$filename;

                $newname=$uploaddir.$image_name;

                if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname)) {
                    /* ficheiro carregado com sucesso,
                     * envia HTML com imagem para apresentar ao visitante
                     */
                    echo "<img src='".$uploaddir.$image_name."' class='imgList'>";
                } else {
                    echo '<span class="imgList">Ficheiro não foi carregado!</span>';
                }
            } else {
                echo '<span class="imgList">Limite de tamanho atingido!</span>';
            }
        } else {
            echo '<span class="imgList">Extensão do ficheiro desconhecida!</span>';
        }
    }
}

?>

Resultado

O resultado da utilização do código em cima apresentado é o que pode ser visto neste GIF animado com 4 passos:

  • Formulário;
  • Imagem a ser enviada para o servidor;
  • Imagem a ser apresentada;
  • Segunda imagem a ser apresentada.

Capturas de Tela


Download

Podes fazer o download de todos os ficheiros necessários a partir da minha DropBox:

Link para ficheiro multiple_upload.zip.


Explicação

De forma a melhor entenderes o que está a acontecer, segue uma explicação superficial dando conta da informação relevante para um entendimento de todo o processo:

  1. O plugIn de jQuery vai estar atento ao formulário para que quando o utilizador escolhe um ficheiro, seja despoletada uma acção que vá enviar o mesmo para o servidor;

  2. No lado do servidor, estamos a verificar/validar o ficheiro recebido e respondemos ao plugIn de jQuery enviando o HTML que pretendemos que ele aplique na página. Quando corre tudo como pretendemos, o HTML enviado é uma TAG img com caminho para a imagem.

  3. O plugIn de jQuery recebe então o HTML, apresenta o mesmo e desbloqueia o ace


Créditos desta solução para o web-site www.9lessons.info: Ajax Select and Upload Multiple Images with Jquery

1
  • 5
    Minha nossa, esta vai pro meta! :)
    – bfavaretto
    Commented 18/02/2014 às 2:25
3

Para simplesmente exibir a imagem na tela no ato da escolha, basta implementar o código js abaixo:

$("##ID DO INPUT FILE##").change(function (event) {
    var reader = new FileReader();
    $(reader).load(function (event) {
        $("##ID DO ELEMENTO IMG##").attr("src", event.target.result);
    });
    reader.readAsDataURL(event.target.files[0]);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .