Cadastro com Foto Jquery

Duvida como posso fazer um cadastro de ouvintes via jquery e com cadastro de foto

<script type="text/javascript">
$(function(){
$("#btn").click(function(event){
var arquivo = $('#foto').val();
 $.post(
 "envia_ouvinte.php",
 { foto: arquivo },
 function(data) {
 $('#resposta').html(data);
 }

 );
 });
});
</script>

<div class="cadastro-do-ouvinte">
 <input name="nome" type="text" id="nome" placeholder="Seu nome">
 <input name="data_nasc" type="text" id="data_nasc" placeholder="Data Nasc">
 <input name="signo" type="text" id="signo" placeholder="Seu signo">
 <input name="apelido" type="text" id="apelido" placeholder="Seu apelido">
 <input name="email" type="text" id="email" placeholder="Seu e-mail">
 <input name="ddd" type="text" id="ddd" placeholder="DDD" style="width:30px; float:left; margin-right:8px;">
 <input name="telefone" type="text" id="telefone" placeholder="Telefone" style="width: 124px; float:left;">
 <div class="clear"></div>
 <input name="foto" class="file" id="foto">
 <div class="contentInputFile">
 <input name="upload" type="file"/>
 </div>
 <div>
 <button class="botao" id="btn">Cadastrar</button>
 </div>
 </div>