Upload PHP Images and Ajax send file path to Input

Asked

Viewed 2,473 times

1

I’m using an image upload system that I found on the internet, serves me a lot! In addition to uploading images, it resizes and facilitates the work of users.

The question is this::

I have a form with some inputs, these must be filled with the image path on the server. With another system that I used, the image appeared and it was enough for the user to right-click and copy the address of the image. It became difficult for more than 50% of them.

I thought to myself: Can I send the direct path to the input? I’ve researched a lot on the internet, but without result. So I turn to the gurus of this community.

If I am mistaken, there is some solution to this question?

Well, let’s go to the codes:

The archive 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>

The archive save 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);

This is very important for me, because I will use this code in all projects, for the ease of use. It sends the file very easily, even users with little knowledge can use (believe me, here are many!).

php ajax

  • Paste the codes directly into the question. Or the section you are experiencing difficulties with. If you have questions, read How to create a Minimum, Complete and Verifiable example

  • I was afraid of getting too big, so I did it like this. I’ll do as you recommended, buddy. One moment, please.

  • Hebert if it is large, add only snippets pertinent to your question. Read the link I sent, if you have questions.

  • Okay, @Diegofelipe. I’m still learning to post here. In fact, my question is just one: How could I take the name of the file that went to the server folder and play in an input. I just tried to explain in more detail...

  • He saves the image here: file_put_contents("../img/{$nome}.jpg", $dados); I need to take this file name and play an input, but I’m not finding a way to do it.

1 answer

1


To recover image data you need to make changes to your ajax request and server response.

Client side changes

$.post allows you to capture the server response by simply adding a parameter to your callback function.

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

In this case the request response must be returned to variable sponse

Server side changes

The server in turn should return the data needed for its javascript.

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

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

This code returns a JSON object with attribute foo worthwhile bar

Practical example

Using your code as the basis, an example that should return the file name and display it in a 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>

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

  • It actually shows the file name on the console, but without the extension and without the path. That’s the least, the path is the same and the extension too, I can put. But I need that information in an input, how would I do that? Based on your solution, I’m looking for information...

  • @Herbert Richard to add the name of the photo in the Input, just change the console.log( response.photo ); There are several ways to change the input, so I didn’t want to use form x or y and let you apply the form you believe most appropriate, for me would use good old Jquery $('#id_do_input').val( response.photo );.

  • All right, my friend. Actually, I didn’t have a preferred form. I will test this solution and return in a moment...

  • It worked perfectly! Now, I just need to put in the code the full path of the server. I will enter it manually in the code, no problems. My only concern at the moment is that in the same file I have several image uploads. But I’ll see what I can do and I’ll get back to you if you have any further questions. Thank you very much for the support!

  • A hint would be to put the fixed code of the server-side folder. As for the various image uploads in the same file, you say that the same html page has multiple upload forms or that the server side should receive multiple images?

  • The same page has several inputs, everything was adapted to the will of the customer. My line ended up being like this: $('#bancoimgthumb').val( 'caminho' + response.photo + '.jpg' );. I’ve done the tests, everything works perfectly.

  • The problem now is to put the same code in the various inputs, but with different id’s, to be written in the database. I have 1 main and 10 secondary image. In your opinion, what is the best way to do?

  • You can leave the dynamic input selector instead of $('#id_do_input').val( response.photo );, use something like $( '#input_de_resposta_' + imagem_atual ).val( response.photo ); the variable imagem_atual is already in your script and could be used if it was not overwritten before getting the answer. Create a temporary identifier for the image and add to the input selector.

  • I talked to him, I don’t need to do the inputs separately. I can do a Multiple, he sends all the photos. I just need to know how to save it in the bank, because each image has a different path... but I will break my head here, any questions I come to ask. Anyway, thank you for your valuable help!

Show 4 more comments

Browser other questions tagged php ajax

You are not signed in. Login or sign up in order to post.