Campo File fake

Objetivo ocultar campo <input type=”file” >, solicito auxilio no script javascript (jquery), que ao selecionar o arquivo esta submetendo a página.

 

 <script>

 $(function(){
 $(" .botao ").click(function()
 {
 $(" .file ").click();
 var arquivo = $('.file').val();
 var file = arquivo.replace(/\\/g, '/').replace(/.*\//, '');;
 $(" .botao ").val(file);
 $(" .file ").val(arquivo);
 alert(arquivo);
 return false; /* Sem o return false; o campo file fica vazio */
 }); //botao

 }); // function inicial

 </script>

<form action="teste.php" method="POST" enctype='multipart/form-arquivo' />
<input type="submit" class="botao" value="Anexar Arquivo" /> <!-- Ao clicar no botão o file abre e Anexo o arquivo -->

<!-- input type=”file” sera ocultado -->

<input type="file" name="arquivo" class="file">

<input type="submit" value="upload" />
</form>

Arquivo teste.php

<?php

$uploaddir = '/arq/';
$uploadfile = $uploaddir . $_FILES['arquivo']['name'];

if (move_uploaded_file($_FILES['arquivo']['tmp_name'], $uploaddir . $_FILES['arquivo']['name']))

?>

 

<style>

.botao
 {
 margin-top:0px;
 width: 150px;
 height:20px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 behavior: url('./CSS/border-radius.htc');
 border: 1px solid #BBB;
 text-align: center;
 background-color:#336799;
 cursor:pointer;
 color:#FFFFFF;
 margin-left:60%;
 float:top;
 }
</style>

<label for="arquivo">Selecionar</label>
<input type="file" id="arquivo" style="width: 0; height: 0; outline: none"/>

$('#arquivo').on('change', function(){
 var filename = $( this ).val().split('\\').pop();
 $('label[for="arquivo"]').text( filename );
});