Created
February 18, 2022 00:57
-
-
Save trupakufi/f2b3015f55990aa3976eeda50f5c8f25 to your computer and use it in GitHub Desktop.
Uma forma muito simples de fazer um Preview de uma imagem, antes de fazer o upload, utilizando recursos nativos do js, muito bom, e muito prático.
This file contains hidden or 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 Previewer Uploader</title> | |
| </head> | |
| <body> | |
| <div> | |
| <img | |
| src="#" | |
| alt="Preview Image Upload" | |
| width="200" | |
| id="image-previewer" | |
| /> | |
| </div> | |
| <form action=""> | |
| <input | |
| type="file" | |
| name="input-image-upload" | |
| onchange="PreviewImage()" | |
| id="image-uploader" | |
| /> | |
| </form> | |
| <script> | |
| const image = document.getElementById("image-previewer"); | |
| function PreviewImage() { | |
| image.src = URL.createObjectURL(event.target.files[0]); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment