5

Tenho o seguinte código com um <input> do tipo texto e outro do tipo arquivo. Vejam:

<form action="#" method="post" enctype="multipart/form-data">
    Name file:
    <input type="text" name="name" id="name"><br/><br/>
    <input type="file" name="file" id="file">
</form>

Gostaria de preencher o input text com o nome do arquivo carregado no input file. Qual melhor forma de fazer isso?

3 Respostas 3

5

Podes ir buscar o nome do ficheiro a .files[0].name, depois é só preencher o input de texto com esse valor:

var inputNome = document.getElementById('name');
var inputFicheiro = document.getElementById('file');

inputFicheiro.addEventListener('change', function() {
  var nome = this.files[0].name;
  inputNome.value = nome;
});
<form action="#" method="post" enctype="multipart/form-data">
  Name file:
  <input type="text" name="name" id="name"><br/><br/>
  <input type="file" name="file" id="file">
</form>

0
1

Não sei se é a melhor, mas com jQuery é possível recuperar os arquivos pelo evento change:

$('[name="file"]').on('change', function(){
  $('[name="name"]').val($(this)[0].files[0].name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post" enctype="multipart/form-data">
    Name file:
    <input type="text" name="name" id="name" readonly><br/><br/>
    <input type="file" name="file" id="file">
</form>

0

Busque pelo elemento do tipo file em seu formulário e armazene o name dele em uma variável, em seguida atribua ao value do input do tipo text.

Se você definir um name para seu formulário, você não precisara selecionar o input do tipo text com querySelector, simplesmente use: document.formName.fieldName.

var inputFicheiro = document.getElementById('file');

inputFicheiro.addEventListener('change', function() {
  document.formName.name.value = this.files[0].name;
  // Como seu input text tem o name de "name" utilize da mesma maneira.
});


<form action="#" method="post" enctype="multipart/form-data" name="formName">
   Name file:
   <input type="text" name="name" id="name"><br/><br/>
   <input type="file" name="file" id="file">
</form>
2

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 .