How to send an image by Jquery, via $.POST?

Question

My friends, good afternoon! I am creating a system where the person has to send an image to save in the database, but as I am making the request via Jquery, is giving the error message that I can only send files of type jpg, png and gif. From what I’ve been looking at, Jquery doesn’t send images! They could help me solve the problem?

Jquery:

$('#btnEnviar').click(function() {
    var obs = $('#txtObs').val();
    var foto = $('#arquivo').val();

    $.post('cadastrar.php', {'txtObs':obs, 'arquivo':foto}, function(dados) {
        //Exibe o resultado do arquivo cadastrar.php no ID=resultado
        $('#resultado').html(dados);
        $("#resultado").fadeTo(3000, 500).slideUp(1000);
        $('input').empty();

    });
});

HTML:

<form method="post" action="" id="" enctype="multipart/form-data">   

    <div data-role="fieldcontain" style="padding:20px;">
        <label for="txtObs">Obs:</label>
        <textarea class="form-control" id="txtObs" name="txtObs" cols="40" rows="2"></textarea>
    </div>

    <label for="arquivo">Foto:</label>
    <input type="file" id="arquivo" name="arquivo" />

    <br>

    <input class="form-control btn btn-success" type="button" value="Cadastrar" name="btnEnviar" id="btnEnviar" />

</form>

PHP:

<?php
include 'init.php';

$obs = $_POST['txtObs'];

if (($obs == '')) {
echo("<div class='alert alert-danger' align='center'><span class='glyphicon glyphicon-alert'></span><b> Preencha do dados em branco!</b></div>");
die();
} else {

// Pasta onde o arquivo vai ser salvo
$_UP['pasta'] = 'fotos/';

// Tamanho máximo do arquivo (em Bytes)
$_UP['tamanho'] = 1024 * 1024 * 5; // 5Mb

// Array com as extensões permitidas
$_UP['extensoes'] = array('jpg', 'png', 'gif');

// Renomeia o arquivo? (Se true, o arquivo será salvo como .jpg e um nome único)
$_UP['renomeia'] = true;

// Array com os tipos de erros de upload do PHP
$_UP['erros'][0] = 'Não houve erro';
$_UP['erros'][1] = 'O arquivo no upload é maior do que o limite do PHP';
$_UP['erros'][2] = 'O arquivo ultrapassa o limite de tamanho especifiado no HTML';
$_UP['erros'][3] = 'O upload do arquivo foi feito parcialmente';
$_UP['erros'][4] = 'Não foi feito o upload do arquivo';

// Verifica se houve algum erro com o upload. Se sim, exibe a mensagem do erro
if ($_FILES['arquivo']['error'] != 0) {

  die("Não foi possível fazer o upload, erro:" . $_UP['erros'][$_FILES['arquivo']['error']]);
  exit; // Para a execução do script

}

// Caso script chegue a esse ponto, não houve erro com o upload e o PHP pode continuar
// Faz a verificação da extensão do arquivo
$extensao = strtolower(end(explode('.', $_FILES['arquivo']['name'])));

if (array_search($extensao, $_UP['extensoes']) === false) {

  echo '<div align="center"><span class="alert alert-danger">Por favor, envie arquivos com as seguintes extensões: jpg, png ou gif.</span></div><br><br>';
  exit;
}

// Faz a verificação do tamanho do arquivo
if ($_UP['tamanho'] < $_FILES['arquivo']['size']) {

  echo '<div align="center"><span class="alert alert-danger">O arquivo enviado é muito grande, envie arquivos de até 5Mb.</span></div><br><br>';

  exit;

}

// O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta
// Primeiro verifica se deve trocar o nome do arquivo
if ($_UP['renomeia'] == true) {

  // Cria um nome baseado no UNIX TIMESTAMP atual e com extensão .jpg
  $nome_final = md5(time()).'.jpg';

} else {

  // Mantém o nome original do arquivo
  $nome_final = $_FILES['arquivo']['name'];

}

// Depois verifica se é possível mover o arquivo para a pasta escolhida
if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $_UP['pasta'] . $nome_final)) {

  // Upload efetuado com sucesso!
  $foto = $_UP['pasta'] . $nome_final;
}

$sql_i = mysql_query("INSERT INTO mapa (obs, foto) VALUES ('$obs', '$foto')");
echo("<div class='alert alert-success' align='center'><span class='glyphicon glyphicon-ok'></span> Cadastrado com sucesso!</div>");

}

?>

From now on I appreciate your help!