Created
May 20, 2019 07:01
-
-
Save realinit/8b638f74229d63ce0f3f999a8ce818be to your computer and use it in GitHub Desktop.
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
| <!-- simple drag and drop using vanila Js and Jquery --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Drag Drop Demo By Nitin</title> | |
| <style> | |
| .uploader {position:relative; overflow:hidden; width:100%; | |
| height:350px; background:#f3f3f3; border:2px dashed #e8e8e8;} | |
| #filePhoto{ position:absolute;width:100%;height:400px;top:-50px; | |
| left:0; | |
| z-index:2; | |
| opacity:0; | |
| cursor:pointer; | |
| } | |
| .uploader img{ | |
| position:absolute; | |
| width:100%; | |
| height:352px; | |
| top:-1px; | |
| left:-1px; | |
| z-index:1; | |
| border:none; | |
| } | |
| </style> | |
| <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" | |
| crossorigin="anonymous"></script> | |
| </head> | |
| <body> | |
| <div class="uploader" onclick="$('#filePhoto').click()"> | |
| click here or drag here your images for preview and set userprofile_picture data | |
| <img src=""/> | |
| <input type="file" name="userprofile_picture" id="filePhoto" /> | |
| </div> | |
| </body> | |
| <script> | |
| (function(){ | |
| var imageLoader = document.getElementById('filePhoto'); | |
| imageLoader.addEventListener('change', handleImage, false); | |
| function handleImage(e) { | |
| var reader = new FileReader(); | |
| reader.onload = function (event) { | |
| $('.uploader img').attr('src',event.target.result); | |
| } | |
| reader.readAsDataURL(e.target.files[0]); | |
| } | |
| }()); | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
simple drag and drop using vanila Js and Jquery