Last active
April 16, 2017 16:02
-
-
Save mucahitnezir/31653893e046220effecc79332ce500a to your computer and use it in GitHub Desktop.
You can show selected images via javascript without upload.
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-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Image Previews without upload</title> | |
| <style type="text/css"> | |
| #pictures { width: 1000px; height: auto; margin: 40px auto; padding: 20px; } | |
| #pictures img { vertical-align: middle; width: 235px; height: auto; float: left; margin-right: 20px; margin-bottom: 20px; } | |
| #pictures img:nth-child(4n) { margin-right: 0px; } | |
| </style> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| $('input#fileUpload').change(function() { | |
| $("#pictures").empty(); | |
| var count = this.files.length; | |
| for (var $i=0; $i<count; $i++) { | |
| $('#pictures').prepend('<img src="'+ window.URL.createObjectURL(this.files[$i]) +'" />') | |
| } | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <input type="file" multiple="multiple" id="fileUpload"> | |
| <div id="pictures"> | |
| <div class="clear"></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment