Diretorio com o ajax

Pessoal... eu estou passando meus dados do documento html para meu documento php que é o controller e resolvi usar ajax para poder exibir uma mensagem de sucesso após o envio dos dados do form, sem precisa recarregar a página para que funcione minha mensagem de sucesso sempre que for inserido os dados no submit. Mas eu fiz o codigo js usando o ajax e nao funcionou... vejam se meu erro está realmente na passagem do meu diretorio do documento ImagemController.php. Ele faz tudo certinho e talz... mas nao ta inserindo os dados no banco... ele nao ta enviando os dados para o meu controller (acredito eu). Não coloquei action pq pelo q vi minha funcao com ajax vai providenciar de mandar os dados e terei um ajax na minha tela. Eu deixei com o action e deu tudo certo... porem o ajax nao funcionou e imagem q seria o action preenchido... e vi q msm assim ele ainda sai da pagina do form.

[dir] Codigo-Fonte

->[dir] js

--> java.js <<< é aqui onde fica minha função ajax.

->GerenciarFotos.php <<< é aqui onde se encontra o form

->ImagemController.php <<<< é aqui onde eu recebo meus dados do form

função js que se encontra no arquivo java.js

function formAjax() {
 // Cria o objeto XMLHttpRequest
 var ajax = new XMLHttpRequest();
 // Criar a variavel recebendo o nome da pagina que recebe os dados do form
 var url = "ImagemController.php";
 var foto = document.getElementById("foto");
 var preco = document.getElementById("preco");
 var tecido = document.getElementById("tecido");
 var estampa = document.getElementById("estampa");
 var descricao = document.getElementById("descricao");
 var variaveis = "foto="+foto+"&preco="+preco+"&preco="+tecido+"&tecido="+estampa+"&descricao="+descricao;
 ajax.open("POST", url, true);
 //definir as informações de tipo de cabeçalho de conteúdo para o envio de variáveis ​​url codificado
 ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 // acesso a eventos onreadystatechange para o XMLHttpRequest objeto
 ajax.onreadystatechange = function() {
 if(ajax.readyState == 4 && ajax.status == 200) {
 var return_data = ajax.responseText;
 document.getElementById("mensagem").innerHTML = return_data;
 }
 }
 // envia os dados para o php... e espera por uma resposta para alterar a div mensagem
 ajax.send(variaveis); // Atualmente exercuta o request
 document.getElementById("mensagem").innerHTML = "enviando...";
}

meu form da pagina GerenciarFotos.php

<form id="cadastrofotos" class="form-horizontal" method="post" action="" enctype="multipart/form-data">
 <legend>Cadastrar Camisas</legend>

 <div id="mensagem"></div>

 <div class="form-group">
 <label class="labele">Preco</label>
 <div class="col-lg-10">
 <input class="form-control" type="text" name="preco" id="preco"/>
 </div>
 </div>
 <div class="form-group">
 <label class="labele">Tipo de Tecido</label>
 <div class="col-lg-10">
 <input class="form-control" type="text" name="tecido" id="tecido"/>
 </div>
 </div>
 <div class="form-group">
 <label class="labele">Tipo de Estampa</label>
 <div class="col-lg-10">
 <input class="form-control" type="text" name="estampa" id="estampa"/>
 </div>
 </div>
 <div class="form-group">
 <label class="labele">Descricao</label>
 <div class="col-lg-10">
 <input id="descricao" class="form-control" type="text" name="descricao" id="descricao"/>
 </div>
 </div>
 <div class="form-group">
 <label>Insira a camisa personalizada</label>
 <div>
 <input id="foto" type="file" name="foto" />
 </div>
 </div>

 <input id="envia" value="acao" name="acao" type="submit" id="acao" class="btn btn-success" onclick="formAjax();"/>
 </form>