Featured Post

Tablas Responsivas con Bootstrap 5 pc escritorio y dispositivos mobiles

el
0

Vista Previa al subir foto con HTML CSS y JAVASCRIPT PURO

el
 

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vista Previa al subir foto con HTML CSS y JAVASCRIPT PURO</title>
</head>

<style type="text/css">

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
font-family: "Montserrat", serif;
font-size: 13px; 
margin-bottom: 6px;
}

#marco1 {
display: grid;
place-content:center;
}

</style>

<body>

<div id="marco1">

<div id="marco2" style="width:320px;height:200px;border: 2px solid #ddd;border-radius: 8px;box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.6);">

 <form action="" method="post" enctype="multipart/form-data" style="margin: 10px;">
       
  <label>FOTO:</label>
                    
  <input type="file" name="file" class="form-control" id="foto">

  <img id="imagen_prev" src="subirfoto.png"  style="width:140px;height:120px;border: 1px solid #ddd;border-radius: 8px;box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.5); "/>
                   
</form>

</div>

</div>

<script type="text/javascript">
    
document.addEventListener("DOMContentLoaded", function () {
    // Selecciona el input de tipo file por su ID
    const imageInput = document.getElementById("foto"); // id input file

    // Añade un evento 'change' al input de tipo file
    imageInput.addEventListener("change", function () {
        readURL(this);
    });
});

function readURL(input) {
    // Verifica si hay archivos seleccionados
    if (input.files && input.files[0]) {
        // Crea una instancia de FileReader
        const reader = new FileReader();

        // Define la función que se ejecutará cuando se cargue el archivo
        reader.onload = function (e) {
            // Selecciona la imagen por su ID y cambia su atributo 'src'
            const imagePreview = document.getElementById("imagen_prev"); // id etiqueta img
            imagePreview.src = e.target.result;
        };

        // Lee el archivo como una URL de datos (Data URL)
        reader.readAsDataURL(input.files[0]);
    }
}


</script>
</body>
</html>    



Comentarios

Publicar un comentario