Get file name in input file

Question

Get file name in input file

Navigation

#1 by (3 votes)
#2 by (3 votes)

2

I have an input, where when I click, I want you to enter the name of the file.

I have the following code:

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

If you notice, I placed a DIV on top to mask the default ugly layout of an input . However, I would like it to tell you the name of the selected file, how do I do that?

I want the file name to be inside the div trabalheObs

javascript jquery

asked by anonymous 07.11.2014 / 18:48

2 answers

3

In pure JavaScript, you can get the file name by manipulating the Input FileUpload object, as shown below:

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">

07.11.2014 / 19:04

Why is this script returning me an object? Variable $ _POST has size limit?

score 3 · Accepted Answer

You can get the name of the selected file by getting the value of the field.

In this specific case, using the following code:

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