0

Boa tarde, preciso de um código que simule a submissão de um arquivo de input file que ao ser selecionado algum valor, ele submeta para o php da mesmo forma como se estivesse submetendo em um form html. Por exemplo

<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="arquivo">
</form>

E em php, ele receberia desta forma...

<?php
//Exemplo de como receberia o valor do input
$arquivo = $_FILES['arquivo'];
?>

O que preciso é que em jquery eu possa fazer isso, sem precisar de um form html e um botão para submete-lo, mas assim que o input selecione um valor ele submeta da mesma forma como o código acima.

O código que já possuo é este...

HTML

<input type="file" name="am" id = 'am' accept='.pdf'>

JQUERY

      $(document).ready(function(){
            // Quando valor for alterado no input
            $("#am").change(function(){
                // Se o valor alterado do input for diferente de nada
                if($("#am").val()!=""){
                    // Aqui deve ficar o código para submeter para o php
                }
            });
        });
2

1 Resposta 1

1

Para fazer um envio de uma imagem sem utilizar o input-file pode fazer da seguinte forma:

$("#am").on('change', function (e) {

    var reader = [];

    for (var i = 0; i < e.target.files.length; i++) {
        reader[i] = new FileReader();

        reader[i].onload = function (e) {
            //Essa função será executa assim que a imagem for carregada totalmente no cliente, o caminho pode ser adquirido com a variável `e.target.result´
        }

        reader[i].readAsDataURL(e.target.files[i]); // Essa linha é responsável por iniciar o carregamento da imagem

        var formData = new FormData();
        formData.append('file', e.target.files[i]);

        $.ajax({
            url: 'para_onde_o_arquivo.ira',
            cache: false,
            contentType: false,
            processData: false,
            data: formData,
            type: 'post',
            beforeSend: function() {
                // O que fazer antes de enviar
            },
            xhr: function() {
                let myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress', function (e) {
                        if(e.lengthComputable){
                            let max = e.total;
                            let current = e.loaded;

                            let percentual = Math.floor((current * 100) / max);

                            if(percentual < 100)
                            {
                                //Neste ponto a variável `percentual` contém qual a porcentagem da imagem que já foi enviada para o servidor
                            }
                        }
                    }, false);
                }
                return myXhr;
            },
            success: function(data) {
                // O que fazer quando terminar de carregar
            },
            complete: function(data) {
                // O que fazer mesmo dando erro ou terminando de carregar
            },
            error: function(err){
                // O que fazer se der erro ao enviar
            }
        });
    }
});

E no seu arquivo PHP você recebe a imagem normalmente na variável $_FILES.

OBS: Dessa forma será feita uma requisição para cada imagem.

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 .