Logo Forum SatellaSoft

Campo File com HTML e JS

Por: Diego Carlos Data: 28/03/2018 Hora: 21:04:43 Acessos: 119

Boa Noite 

estou tentando estilizar um input do ttype file mas não esta dando certo

segui ate um video de vcs no youtube, mas ja refiz esse codigo umas 3 vezes e o resultado e o mesmo

index.html

<!doctype html>
<html lang="pt-br">
<head>
	<title>Personalizar com File</title>
	<link rel="stylesheet" type="text/css" href="css/teste.css">
	<script src="script.js"></script>
	<meta charset="utf-8">
</head>
	<body>
		<div id="dvCentro">
				<form method="post" name="frmCadastrar" id="frmCadastrar"></form>
				<ul>
					<li>Nome</li>
					<li><input type="text" name="txtNome" id="txtNome" class="formInput" placeholder="Seu Nome Aqui" /></li>
					<li class="breakLine"></li>

					<li>E-mail</li>
					<li><input type="text" name="txtEmail" id="txtEmail" class="formInput"  placeholder="email@dominio.com" /></li>
					<li class="breakLine"></li>

					<li>Imagem</li>
					<li>
						<div id="dvImagem">
							<span dir="spResultado">&nbsp;texto qualquer</span>
							<input type="button" name="btnAcessar" id="btnAcessar" value="Anexar..." />
						</div>
					</li>
					
					<li class ="breakLine">
						<input type="file" name="flImagem" id="flImagem" />
					</li>

					<li><input type="submit" name="btnSubmit" id="btnSubmit" value="Cadastrar" /></li>
				</ul>
			</form>
		</div>
	</body>
</html>

 

script.js

 

document.addEventListener("DOMContentLoaded", function(){

	document.getElementById("btnAcessar").addEventListener("click", function(){
		simularClick();
	}, false);

	document.getElementById("flImagem").addEventListener("change", function(){
		simularClick();
	}, false);


}, false);

function simularClick(){
	document.getElementById("flImagem").click();
}

function atribirNome (){
	var nome = document.getElementById("flImagem").value;
	document.getElementById("spResultado").innerHTML = nome;

}

se puderem me ajudar agradeço




Fechado! O autor deste tópico marcou como resolvido.

Gunnar Correa

Entrou: 08/07/2017

Pontos: 18

Perguntas: 3

Respostas: 4

Olá, Diego.

Só existe dois erros

1º - No evento change, você precisa chamar o método atribuirNome();

2º - No span resultado, o atribuito é ID e não DIR.

 

Segue a correção:

<!doctype html>
<html lang="pt-br">

<head>
    <title>Personalizar com File</title>
    <link rel="stylesheet" type="text/css" href="css/teste.css">
    <script>
        document.addEventListener("DOMContentLoaded", function () {

            document.getElementById("btnAcessar").addEventListener("click", function () {
                simularClick();
            }, false);

            document.getElementById("flImagem").addEventListener("change", function () {
                atribirNome();
            }, false);


        }, false);

        function simularClick() {
            document.getElementById("flImagem").click();
        }

        function atribirNome() {
            var nome = document.getElementById("flImagem").value;
            document.getElementById("spResultado").innerHTML = nome;

        }
    </script>
    <meta charset="utf-8">
</head>

<body>
    <div id="dvCentro">
        <form method="post" name="frmCadastrar" id="frmCadastrar"></form>
        <ul>
            <li>Nome</li>
            <li><input type="text" name="txtNome" id="txtNome" class="formInput" placeholder="Seu Nome Aqui" /></li>
            <li class="breakLine"></li>

            <li>E-mail</li>
            <li><input type="text" name="txtEmail" id="txtEmail" class="formInput" placeholder="email@dominio.com" /></li>
            <li class="breakLine"></li>

            <li>Imagem</li>
            <li>
                <div id="dvImagem">
                    <span id="spResultado">&nbsp;texto qualquer</span>
                    <input type="button" name="btnAcessar" id="btnAcessar" value="Anexar..." />
                </div>
            </li>

            <li class="breakLine" style="display: none;">
                <input type="file" name="flImagem" id="flImagem" />
            </li>

            <li><input type="submit" name="btnSubmit" id="btnSubmit" value="Cadastrar" /></li>
        </ul>
        </form>
    </div>
</body>

</html>

 





Forum SatellaSoft - Todos os Direitos Reservados.

SatellaSoft - Todos os Direitos Reservados.

Contato Sobre Termos de uso SatellaSoft