2

Estou usando um sistema de upload de imagens que achei na internet, me serve muito! Além de fazer o upload das imagens, ele redimensiona e facilita o trabalho de quem usa.

A questão é a seguinte:

Tenho um formulário com alguns inputs, estes devem ser preenchidos com o caminho da imagem no servidor. Com um outro sistema que eu utilizava, a imagem aparecia e bastava o usuário clicar com o botão direito do mouse e copiar o endereço da imagem. Ficou difícil para mais de 50% deles.

Pensei comigo: Será que consigo mandar o caminho direto para o input? Já pesquisei muito na internet, mas sem resultado. Por isso, recorro aos gurus desta comunidade.

Caso eu esteja equivocado, existe alguma solução para esta questão?

Bom, vamos aos códigos:

O arquivo index.html

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>Cadastro de Foto</title>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="js/canvas-to-blob.min.js"></script>
    <script src="js/resize.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <script type="text/javascript">

        // Iniciando biblioteca
        var resize = new window.resize();
        resize.init();

        // Declarando variáveis
        var imagens;
        var imagem_atual;

        // Quando carregado a página
        $(function ($) {

            // Quando selecionado as imagens
            $('#imagem').on('change', function () {
                enviar();
            });

        });

        /*
         Envia os arquivos selecionados
         */
        function enviar()
        {
            // Verificando se o navegador tem suporte aos recursos para redimensionamento
            if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
                alert('O navegador não suporta os recursos utilizados pelo aplicativo');
                return;
            }

            // Alocando imagens selecionadas
            imagens = $('#imagem')[0].files;

            // Se selecionado pelo menos uma imagem
            if (imagens.length > 0)
            {
                // Definindo progresso de carregamento
                $('#progresso').attr('aria-valuenow', 0).css('width', '0%');

                // Escondendo campo de imagem
                $('#imagem').hide();

                // Iniciando redimensionamento
                imagem_atual = 0;
                redimensionar();
            }
        }

        /*
         Redimensiona uma imagem e passa para a próxima recursivamente
         */
        function redimensionar()
        {
            // Se redimensionado todas as imagens
            if (imagem_atual > imagens.length)
            {
                // Definindo progresso de finalizado
                $('#progresso').html('Imagen(s) enviada(s) com sucesso');

                // Limpando imagens
                limpar();

                // Exibindo campo de imagem
                $('#imagem').show();

                // Finalizando
                return;
            }

            // Se não for um arquivo válido
            if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null))
            {
                // Passa para a próxima imagem
                imagem_atual++;
                redimensionar();
                return;
            }

            // Redimensionando
            resize.photo(imagens[imagem_atual], 800, 'dataURL', function (imagem) {

                // Salvando imagem no servidor
                $.post('ajax/salvar.php', {imagem: imagem}, function() {

                    // Definindo porcentagem
                    var porcentagem = (imagem_atual + 1) / imagens.length * 100;

                    // Atualizando barra de progresso
                    $('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');

                    // Aplica delay de 1 segundo
                    // Apenas para evitar sobrecarga de requisições
                    // e ficar visualmente melhor o progresso
                    setTimeout(function () {
                        // Passa para a próxima imagem
                        imagem_atual++;
                        redimensionar();
                    }, 1000);

                });

            });
        }

        /*
         Limpa os arquivos selecionados
        */
        function limpar()
        {
            var input = $("#imagem");
            input.replaceWith(input.val('').clone(true));
        }
    </script>
</head>

<body>

<div class="container">

    <h1>Envie sua Foto:</h1>

    <form method="post" action="#" role="form">

        <div class="progress">
            <div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
        </div>

        <div class="form-group row">

            <div class="col-xs-12">
                <input id="imagem" type="file" accept="image/*" multiple/>
            </div>

        </div>

    </form>

</div>

</body>
</html>

O arquivo salvar.php

<?php

// Recuperando imagem em base64
// Exemplo: data:image/png;base64,AAAFBfj42Pj4
$imagem = $_POST['imagem'];

// Separando tipo dos dados da imagem
// $tipo: data:image/png
// $dados: base64,AAAFBfj42Pj4
list($tipo, $dados) = explode(';', $imagem);

// Isolando apenas o tipo da imagem
// $tipo: image/png
list(, $tipo) = explode(':', $tipo);

// Isolando apenas os dados da imagem
// $dados: AAAFBfj42Pj4
list(, $dados) = explode(',', $dados);

// Convertendo base64 para imagem
$dados = base64_decode($dados);

// Gerando nome aleatório para a imagem
$nome = md5(uniqid(time()));

// Salvando imagem em disco
file_put_contents("../img/{$nome}.jpg", $dados);

Isso é muito importante pra mim, pois vou usar este código em todos os projetos, pela facilidade de uso. Ele manda o arquivo com muita facilidade, até os usuários com pouco conhecimento consegue utilizar (acredite, por aqui tem muitos!).

5
  • Cole os códigos diretamente na pergunta. Ou o trecho que você está tendo dificuldades. Caso tenha dúvidas, leia Como criar um exemplo Mínimo, Completo e Verificável
    – user28595
    Commented 8/01/2016 às 1:20
  • Fiquei com medo de ficar muito grande, por isso fiz assim. Farei como recomendaste, amigo. Um instante, por favor. Commented 8/01/2016 às 1:22
  • Hebert se for grande, adicione apenas trechos pertinentes a sua dúvida. Dê uma lida no link que eu mandei, caso tenha dúvidas.
    – user28595
    Commented 8/01/2016 às 1:23
  • Ok, @DiegoFelipe. Eu ainda estou aprendendo a postar aqui. Na verdade, minha dúvida é uma só: Como poderia pegar o nome do arquivo que foi pra pasta do servidor e jogar num input. Tentei apenas explicar com mais detalhes... Commented 8/01/2016 às 1:25
  • Ele salva a imagem aqui: file_put_contents("../img/{$nome}.jpg", $dados); Preciso pegar esse nome de arquivo e jogar num input, mas não estou conseguindo achar um jeito de fazer isso. Commented 8/01/2016 às 1:26

1 Resposta 1

1

Para conseguir recuperar os dados da imagem você precisar fazer alterações em sua requisição ajax e na resposta do servidor.

Alterações lado cliente

$.post permite que você capture a resposta do servidor, simplesmente adicionando um parâmetro em sua função de callback.

$.post('ajax/salvar.php', {imagem: imagem}, function(response) {

Nesse caso a resposta da requisição deve ser retornado para variável response

Alterações lado Servidor

O servidor por sua vez deve retornar os dados necessários para o seu javascript.

<?php
header('Content-Type: application/json');

$data = array('foo' => 'bar');
echo json_encode($data);
die();

Esse código retorna um objeto JSON com atributo foo de valor bar

Exemplo prático

Utilizando o seu código como base, um exemplo que deve retornar o nome do arquivo e exibi-lo em um console.log

index.html

<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <title>Cadastro de Foto</title>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="js/canvas-to-blob.min.js"></script>
    <script src="js/resize.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <script type="text/javascript">

        // Iniciando biblioteca
        var resize = new window.resize();
        resize.init();

        // Declarando variáveis
        var imagens;
        var imagem_atual;

        // Quando carregado a página
        $(function ($) {

            // Quando selecionado as imagens
            $('#imagem').on('change', function () {
                enviar();
            });

        });

        /*
         Envia os arquivos selecionados
         */
        function enviar()
        {
            // Verificando se o navegador tem suporte aos recursos para redimensionamento
            if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
                alert('O navegador não suporta os recursos utilizados pelo aplicativo');
                return;
            }

            // Alocando imagens selecionadas
            imagens = $('#imagem')[0].files;

            // Se selecionado pelo menos uma imagem
            if (imagens.length > 0)
            {
                // Definindo progresso de carregamento
                $('#progresso').attr('aria-valuenow', 0).css('width', '0%');

                // Escondendo campo de imagem
                $('#imagem').hide();

                // Iniciando redimensionamento
                imagem_atual = 0;
                redimensionar();
            }
        }

        /*
         Redimensiona uma imagem e passa para a próxima recursivamente
         */
        function redimensionar()
        {
            // Se redimensionado todas as imagens
            if (imagem_atual > imagens.length)
            {
                // Definindo progresso de finalizado
                $('#progresso').html('Imagen(s) enviada(s) com sucesso');

                // Limpando imagens
                limpar();

                // Exibindo campo de imagem
                $('#imagem').show();

                // Finalizando
                return;
            }

            // Se não for um arquivo válido
            if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null))
            {
                // Passa para a próxima imagem
                imagem_atual++;
                redimensionar();
                return;
            }

            // Redimensionando
            resize.photo(imagens[imagem_atual], 800, 'dataURL', function (imagem) {

                // Salvando imagem no servidor
                $.post('ajax/salvar.php', {imagem: imagem}, function(response) {

                    //Exibindo os dados da resposta do servidor
                    console.log( response.photo );

                    // Definindo porcentagem
                    var porcentagem = (imagem_atual + 1) / imagens.length * 100;

                    // Atualizando barra de progresso
                    $('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');

                    // Aplica delay de 1 segundo
                    // Apenas para evitar sobrecarga de requisições
                    // e ficar visualmente melhor o progresso
                    setTimeout(function () {
                        // Passa para a próxima imagem
                        imagem_atual++;
                        redimensionar();
                    }, 1000);

                }, 'json');//O parâmetro JSON informa ao Jquery para tratar a resposta como um JSON

            });
        }

        /*
         Limpa os arquivos selecionados
        */
        function limpar()
        {
            var input = $("#imagem");
            input.replaceWith(input.val('').clone(true));
        }
    </script>
</head>

<body>

<div class="container">

    <h1>Envie sua Foto:</h1>

    <form method="post" action="#" role="form">

        <div class="progress">
            <div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
        </div>

        <div class="form-group row">

            <div class="col-xs-12">
                <input id="imagem" type="file" accept="image/*" multiple/>
            </div>

        </div>

    </form>

</div>

</body>
</html>

salvar.php

<?php

//Alterações no header preferencialmente são a primeira coisa no script
header('Content-Type: application/json');

// Recuperando imagem em base64
// Exemplo: data:image/png;base64,AAAFBfj42Pj4
$imagem = $_POST['imagem'];

// Separando tipo dos dados da imagem
// $tipo: data:image/png
// $dados: base64,AAAFBfj42Pj4
list($tipo, $dados) = explode(';', $imagem);

// Isolando apenas o tipo da imagem
// $tipo: image/png
list(, $tipo) = explode(':', $tipo);

// Isolando apenas os dados da imagem
// $dados: AAAFBfj42Pj4
list(, $dados) = explode(',', $dados);

// Convertendo base64 para imagem
$dados = base64_decode($dados);

// Gerando nome aleatório para a imagem
$nome = md5(uniqid(time()));

// Salvando imagem em disco
file_put_contents("../img/{$nome}.jpg", $dados);

//Resposta do servidor em json
$data = array('photo' => $nome);
echo json_encode($data);
9
  • Ele realmente mostra o nome do arquivo no console, mas sem a extensão e sem o caminho. Isso é o de menos, o caminho é o mesmo e a extensão também, posso colocar. Mas, preciso dessa informação num input, como faria isso? Baseado na sua solução, estou procurando informações na net, mas tenho pouquíssimo conhecimento em javascript... Commented 11/01/2016 às 11:45
  • @Herbert Richard para adicionar o nome da foto no Input, basta alterar o console.log( response.photo ); do retorno pelo código de substituir o Input.Existe diversas formas de alterar o input, por isso não quis usar forma x ou y e deixar que você aplicasse a forma que acredita mais indicada, por mim usaria o bom e velho Jquery $('#id_do_input').val( response.photo );. Commented 11/01/2016 às 14:04
  • Tudo bem, meu amigo. Na verdade, eu não tinha uma forma preferida. Vou testar essa solução e retorno em instantes... Commented 11/01/2016 às 14:09
  • Funcionou perfeitamente! Agora, só preciso colocar no código o caminho completo do servidor. Vou inserir ele manualmente no código, sem problemas. Minha única preocupação no momento é que, no mesmo arquivo, tenho vários uploads de imagem. Mas vou ver o que faço e retorno caso tenha alguma dúvida adicional. Muito obrigado pelo suporte! Commented 11/01/2016 às 14:23
  • Uma dica dica seria colocar o código fixo da pasta do lado servidor. Quantos aos vários uploads de imagem no mesmo arquivo, você diz que a mesma página html tem vários formulários de envio ou que o lado servidor deve receber várias imagens? Commented 11/01/2016 às 15:14

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 .