- index.html
- server-static.js (node/express)
- bootstrap.min.css (não incluido)
- zepto.min.js (não incluido)
- imagens para demonstração (jpeg, não incluidos)
Last active
June 19, 2017 00:13
-
-
Save rpragana/f8729c23c3f67ebace58f7a83967acf7 to your computer and use it in GitHub Desktop.
FileReader
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"> | |
| <title>Html5 Local File (arquivos locais) API</title> | |
| <script type="text/javascript" src="zepto.min.js"></script> | |
| <link href="bootstrap.min.css" rel="stylesheet" /> | |
| <style> | |
| img { | |
| width: 100%; | |
| } | |
| #preview { | |
| margin: 20px; | |
| } | |
| table td { | |
| padding: 2px 10px; | |
| font-weight: bold; | |
| font-size: 110%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>HTML5 File</h1> | |
| <div class="container-fluid"> | |
| <div class="row" > | |
| <div class="col-md-12" > | |
| <input type="file" class="form-control-file" | |
| id="arquivo-com-imagem"> | |
| <div id="preview" class="col-md-6"> | |
| </div> | |
| <div id="data" class="col-md-8"> | |
| <table class="table-bordered"><tr> | |
| <td>Imagem (arq): <span id="name"></span></td> | |
| <td>Tamanho: <span id="size"></span></td> | |
| <td>Tipo: <span id="type"></span></td> | |
| </tr></table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function mostraImage(file){ | |
| var reader = new FileReader(); | |
| reader.onload = function(event){ | |
| var imgurl = event.target.result | |
| $('#preview').html("<img src='"+imgurl+"' />") | |
| $('#name').html(file.name) | |
| $('#size').html(file.size) | |
| $('#type').html(file.type) | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| $( "#arquivo-com-imagem" ).change(function() { | |
| console.log("arquivo com imagem selecionado") | |
| //obtém primeira image, despreza as demais | |
| console.log(this.files[0].size) | |
| mostraImage(this.files[0]) | |
| }); | |
| </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
| #!/usr/bin/env nodemon | |
| var fs = require('fs'); | |
| var path = require('path'); | |
| var express = require('express'); | |
| var app = express() | |
| app.use(express.static(__dirname + '/')); | |
| app.listen(8000); | |
| console.log('Aponte seu navegador para https://localhost:8000/'); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment