Submit file with jquery

Question

Good afternoon, I need a code that simulates the submission of an input file that when selected some value, it submits to php in the same way as if it were submitting in an html form. For example

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

And in php, it would receive this way...

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

What I need is that in jquery I can do this, without needing an html form and a button to commit it, but as soon as the input selects a value it submits in the same way as the code above.

The code I already have is this...

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

Answer 1

To upload an image without using input-file can do as follows:

$("#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
            }
        });
    }
});

And in your file PHP you receive the image normally in the variable $_FILES.

NOTE: This way a request will be made for each image.