** ThumbImgs Um seletor de imagens para fazer upload (mostra só as imagens selecionadas, miniaturas). O upload propriamente não é realizado por esse programa. Eum um vídeo futuro podemos mostrar como fazer essa parte.
Created
June 8, 2018 23:08
-
-
Save rpragana/aa6e2d9254e8eeee7d149ff71ccc906a to your computer and use it in GitHub Desktop.
ThumbImgs
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link href="bootstrap.min.css" rel="stylesheet"> | |
| <script src="vue.js"></script> | |
| <style> | |
| [hidden] { | |
| display: none !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Seletor de imagens para upload</h1> | |
| <div id="app" class="container"> | |
| <div class = "row"> | |
| <div v-for="item in items" class = "col-sm-4 col-md-2"> | |
| <a href = "#" class = "thumbnail"> | |
| <img :src="item.src"> | |
| {{ item.fname }} | |
| </a> | |
| </div> | |
| </div> | |
| <label class="btn btn-primary"> | |
| <img src="camera.png"><br> | |
| Adiciona imagem | |
| <input type='file' class='file' | |
| accept='image/*' onchange='openFile(event)' hidden> | |
| </label> | |
| </div> | |
| </body> | |
| <script> | |
| var app = new Vue({ | |
| el: '#app', | |
| data: { | |
| items: [] | |
| } | |
| }) | |
| var openFile = function(event) { | |
| var input = event.target; | |
| var reader = new FileReader(); | |
| reader.fname = input.files[0].name; | |
| reader.onload = function(){ | |
| var dataURL = reader.result; | |
| var newitem={} | |
| newitem.src = dataURL | |
| newitem.fname = reader.fname | |
| app._data.items.push(newitem) | |
| }; | |
| reader.readAsDataURL(input.files[0]); | |
| }; | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment