Last active
March 9, 2019 01:05
-
-
Save porfidev/29893d325be3a719af484faafac88b77 to your computer and use it in GitHub Desktop.
Tutorial para mostrar imagenes en el navegador a partir de un input file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Image Review</title> | |
| <link href="styles.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div class="main-container"> | |
| <div class="input-container"> | |
| Clic aquí para subir tu avatar | |
| <input type="file" id="archivo" name="archivo" /> | |
| </div> | |
| <div class="preview-container"> | |
| <img src="" id="preview"> | |
| </div> | |
| </div> | |
| <script> | |
| function mostrarImagen(event){ | |
| var imagenSource = event.target.result; | |
| var previewImage = document.getElementById('preview'); | |
| previewImage.src = imagenSource; | |
| } | |
| function procesarArchivo(event){ | |
| var imagen = event.target.files[0]; | |
| var lector = new FileReader(); | |
| lector.addEventListener('load', mostrarImagen, false); | |
| lector.readAsDataURL(imagen); | |
| } | |
| document.getElementById('archivo') | |
| .addEventListener('change', procesarArchivo, false) | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Cabin'); | |
| html { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| background: rgb(2,0,36); | |
| background: linear-gradient(214deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); | |
| font-family: 'Cabin', sans-serif; | |
| } | |
| .main-container { | |
| width: 100%; | |
| min-height: 400px; | |
| margin-top: 10%; | |
| text-align: center; | |
| } | |
| .input-container { | |
| text-align: center; | |
| margin: 20px auto; | |
| padding: 20px; | |
| overflow: hidden; | |
| position: relative; | |
| color: white; | |
| cursor: pointer; | |
| border: 2px dashed white; | |
| border-radius: 20px; | |
| display: inline-block; | |
| } | |
| .input-container [type=file] { | |
| cursor: inherit; | |
| display: block; | |
| font-size: 999px; | |
| filter: alpha(opacity=0); | |
| min-height: 100%; | |
| min-width: 100%; | |
| opacity: 0; | |
| position: absolute; | |
| right: 0; | |
| text-align: right; | |
| top: 0; | |
| } | |
| .preview-container { | |
| margin: 0 auto; | |
| width: 200px; | |
| min-height: 200px; | |
| background-color: white; | |
| padding: 10px; | |
| border-radius: 4px; | |
| } | |
| .preview-container > img { | |
| margin: 0; | |
| width: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment