Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

dr.x

Basicão

Recommended Posts

Olá Pessoal ! [/size]

 

Sei que é básico, mas como que eu capturo o nome da imagem e insiro numa input text após selecionar o nome da mesma no diretório. E como visualizar a imagem ao lado desta imagem. O objetivo é, antes fazer o upload, visualizar o nome da imagem.[/size]

<body>
<h1>Cadastrar Banner</h1>
<form action="" method="post" enctype="multipart/form-data" name="cadastro" >
Banner:<br />
<input type="text" name= "nome" /><br /><br />
Imagem de exibição:<br />
<input type="file" name= "foto" /><br /><br />
<input type="submit" name="cadastrar" value="Upload..." />
</form>
</body>

Desde já agradeço. [/size]

Compartilhar este post


Link para o post
Compartilhar em outros sites

código

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<img src="" id="output" width="200" />
<form>
  <input type="text" id="view" />
  <input type="file" id="file" />
</form>

<script type="text/javascript">
var $file = document.getElementById('file'),
    $view = document.getElementById('view'),
    $output = document.getElementById('output');

//escrevendo no input
$file.addEventListener('change', function(){
  $view.value = $file.value;
});
//mostrando na tela antes do upload
$file.addEventListener('change', function(){
  var reader = new FileReader();
  reader.addEventListener('load', function(){
    $output.src = reader.result;
  });
  reader.readAsDataURL(this.files[0]);
});
</script>
</body>
</html>
em funcionamento

http://wbruno.github.io/examples/input-img/

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.