Campo File fake

[cdfree 3]

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>

[Rafael Sirotheau 43]

Primeiro problema é que você está utilizando dois submit. Se eu entendi bem, seu problema é que, ao selecionar o arquivo, ele submete o formulario - o que não deveria estar acontecendo. O fato de usar um type="submit" como substituto ao type="file" causa isso. Troque o type para button.

Agora, sobre campo file fake, o que eu normalmente faço para customizar um input file é coloca-lo com opacity: 0 e colocar um <span> por tras dele, com a formatação (texto, cor, etc) desejada (ou utilizando o próprio wrapper, se for uma imagem como botão).

Segue o jsfiddle: http://jsfiddle.net/9afytfLw/

[Snowden 94]

Outra solução

<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 );
});