Tenho um formulário onde a foto aparece como preview ao ser selecionada para upload:

[![inserir a descrição da imagem aqui][1]][1]


Gostaria de que, ao selecionar a foto, fizesse o upload automaticamente. Como eu passaria os valores para a página **alterar-foto.php**?

O código segue abaixo:

    <div class="faq-profile-btn">
       <label for="imagem" class="btn btn-primary waves-effect waves-light">Nova Foto</label>
       <button type="button" class="btn btn-danger waves-effect waves-light" style="margin-top: -10px" onclick="excluirImagem()">Excluir Foto</button>
    </div>
    <input type="file" name="FotoPerfil" id="imagem" onchange="previewImagem()">
    <div>

        <script>
            function previewImagem(){
        
              var input = document.getElementById("imagem");
              var nome = input.files[0].name;
              var extensao = nome.split('.').pop();
        
              if(extensao != 'jpeg' && extensao != 'jpg' && extensao != 'png'){
                 $('#acessar').modal('show');
              }else{
                var imagem = document.querySelector('input[name=FotoPerfil]').files[0];
                var preview = document.querySelector('img');
                var reader = new FileReader();
        
                reader.onloadend = function () {
                    preview.src = reader.result;
                }
                if(imagem){
                    reader.readAsDataURL(imagem);
                }else{
                    preview.src = "";
                }
            }
          }
            function excluirImagem(){
                 var preview = document.querySelector('img');
                 preview.src = "img/foto_usuario.png";
            }
        </script>

Pensei incluir essa linha:

    var foto = $("imagem").val();
    $.post("alterar-foto.php", {foto: foto}, function(result){
    
    });

Mas não sei se seria da forma correta passar valores **$_FILES** via jquery.


  [1]: https://i.sstatic.net/CADwF.png