2

Tenho um input, onde quando eu clicar, quero que informe o nome do arquivo.

Tenho o seguinte código:

HTML

<div class="trabalheObs">Carregar Curr&iacute;culo</div>
<input style="display:none" type="file" class="margin-top-20 cp" id="curriculoForm" name="curriculoForm" value="" />

CSS

.trabalheObs {
        background-image: url("../imagens/curriculo.png");
        background-position: 420px center;
        background-repeat: no-repeat;
        margin-top: 20px;
        width: 460px;
        height: 45px;
        border-top: 1px solid #e6e6e6;
        background-color: white;
        border-radius: 25px;
        text-indent: 23px;
        font-family:"roboto";
        font-weight: 300;
        font-style: italic;
        color: #999999;
        font-size: 18px;
    }

JQUERY

$(".trabalheObs").click(function () {
    $("#curriculoForm").click();
});

Se vocês notarem, coloquei uma DIV por cima, para mascarar o layout feio padrão de um input. Porém, gostaria que ele informasse o nome do arquivo selecionado, como fazer isso?

Quero que o nome do arquivo fique dentro da div trabalheObs

1

2 Respostas 2

5

Em JavaScript puro, é possível obter o nome do arquivo manipulando-se o objeto Input FileUpload, conforme exemplo abaixo:

var div = document.getElementsByClassName("botaoArquivo")[0];
var input = document.getElementById("inputArquivo");

div.addEventListener("click", function(){
    input.click();
});
input.addEventListener("change", function(){
    var nome = "Não há arquivo selecionado. Selecionar arquivo...";
    if(input.files.length > 0) nome = input.files[0].name;
    div.innerHTML = nome;
});
#inputArquivo { display: none; }
<div class="botaoArquivo">Selecionar arquivo...</div>
<input type="file" id="inputArquivo">

3

Voce pode obter o nome do arquivo selecionado obtendo o valor do campo.

Nesse caso especifico, usando o seguinte codigo:

var nomeDoArquivo = $("#curriculoForm").val(); // obtem o nome
$(".trabalheObs").html(nomeDoArquivo); // coloca o nome dentro da div

// ao clicar na div, dispara a acao do botao escondido
$(".trabalheObs").click(function(){
    $("#curriculoForm").click();
})
9
  • E como informo o nome dentro da div trabalheObs? 7/11/2014 às 17:57
  • @FelipeStoker Editei a minha resposta. Veja se te ajuda. 7/11/2014 às 17:59
  • O conteúdo da div fica igual? <div class="trabalheObs">Carregar Curr&iacute;culo</div> 7/11/2014 às 18:02
  • @FelipeStoker Nao reparei que voce estava usando classe ao inves de ID. Editei minha resposta para usar classe. 7/11/2014 às 18:03
  • 1
    O value inclui o caminho do arquivo, que muitos browsers não permitem acessar. No Chrome, por exemplo, seu código retorna C:\fakepath\nome-do-arquivo.ext.
    – bfavaretto
    7/11/2014 às 18:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .