how to send an image to php through a hidden input='file'

Asked

Viewed 123 times

0

I would like to know how to send my <input type="file"> to the php through the ajax. I wrote the code but the same does not call the url php and does not return me error.

html code:

<button class="icon-overlay">Pesquisar Img</button>
<form id="imgUpload" enctype="multipart/form-data">
    <input type="file" id="avatar-img" name="file" accept="image/jpeg" style="display: none;">
</form>

jquery code:

$(".icon-overlay").click(function(){
            self.executar();
        });

        $('input:file').change(function() {
                $('#imgUpload').submit(function() {

                    var formulario = document.getElementById('imgUpload');

                    var formData = new FormData(formulario);

                    $.ajax({
                       url: "controller/trade-photo.php",
                       type: "POST",
                       data: formData,
                       dataType: 'json',
                       processData: false,  
                       contentType: false,
                       success: function(retorno){
                            alert(retorno);
                       }
                    });

                    return false;
                });
        });
        function executar(){
            $("#avatar-img").click();
        }
php jquery ajax

1 answer

0


You can use the jQuery to create a input hidden (using CSS) and then use a setInterval to check if the file has been selected.

Following example commented:

<body>
    <button>Enviar imagem</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        /* Adiciona evento de clique no botão */
        $("button").click(function() {

            /* Cria um input escondido */
            $("<input type=\"file\" id=\"upload\" style=\"display:none\" />").appendTo("body");

            /**
             * Instancia o input acima e ativa o evento de clique do input
             * Isso fará abrir uma tela para selecionar o arquivo
             */
            let $upload = $("#upload");
            $upload.click();

            /**
             * Define um intervalo com uma função a ser
             * executada a cada meio segundo.
             * Aqui iremos verificar se o arquivo foi selecionado
             * e faremos o envio do mesmo
             */
            let timer = setInterval( function() {

                /* Verifica se o arquivo foi elecionado */
                if ($upload.val()) {

                    /* Adiciona o arquivo selecionado no FormData */
                    const form = new FormData();
                    form.append("file", $("#upload").prop("files")[0]);

                    /* Envia o arquivo */
                    $.ajax({
                       url: "index2.php",
                       type: "POST",
                       data: form,
                       processData: false,  
                       contentType: false,
                       cache: false,
                       success: function(retorno){
                            alert(retorno);
                            $upload.remove();
                       }
                    });

                    /* Finaliza o intervalo */
                    clearInterval(timer);
                }

            }, 500 );
        });
    </script>
</body>

As we can not test the upload here, I made a code following the same orientation above.

/* Adiciona evento de clique no botão */
            $("button").click(function() {
                
                /* Cria um input escondido */
                $("<input type=\"file\" id=\"upload\" style=\"display:none\" />").appendTo("body");
                
                /**
                 * Instancia o input acima e ativa o evento de clique do input
                 * Isso fará abrir uma tela para selecionar o arquivo
                 */
                let $upload = $("#upload");
                $upload.click();
                
                /**
                 * Define um intervalo com uma função a ser
                 * executada a cada meio segundo.
                 * Aqui iremos verificar se o arquivo foi selecionado
                 * e faremos o envio do mesmo
                 */
                let timer = setInterval( function() {
                    
                    /* Verifica se o arquivo foi elecionado */
                    if ($upload.val()) {
                        
                        /* Exibe imagem no body */
                        const reader = new FileReader();
                        reader.onload = function(result) {
                            $("<img src='" + result.target.result + "' />").appendTo("body");
                            $upload.remove();
                        }
                        reader.readAsDataURL($("#upload").prop("files")[0]);
                        
                        /* Finaliza o intervalo */
                        clearInterval(timer);
                    }
                    
                }, 500 );
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Enviar imagem</button>

Browser other questions tagged php jquery ajax

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