Created
November 2, 2015 10:47
-
-
Save aabir/cf5190f53e5f54ab8a10 to your computer and use it in GitHub Desktop.
HTML5 File Reader API
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> | |
| <head> | |
| <title> HTML 5 File Reader API </title> | |
| </head> | |
| <body> | |
| <p id="destination"></p> | |
| <p><input type="file" id="upload-file" multiple></p> | |
| <script type="text/javascript"> | |
| document.getElementById('upload-file').addEventListener('change', function() { | |
| var file; | |
| var destination = document.getElementById('destination'); | |
| destination.innerHTML = ''; | |
| for(var x = 0, xlen = this.files.length; x < xlen; x++) { | |
| file = this.files[x]; | |
| if(file.type.indexOf('image') != -1) { // Very primitive "validation" | |
| var reader = new FileReader(); | |
| reader.onload = function(e) { | |
| var img = new Image(); | |
| img.src = e.target.result; | |
| destination.appendChild(img); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment