In this instructional exercise, we will perceive how to pick pictures with picture review utilizing jQuery. You will find short simple and valuable script here to pick pictures with preview. I will show you on changed event utilizing jQuery without transferring images on the server.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <style> .m-50{ margin-top:100px;} </style> </head> <body> <div class="row m-50"> <div class="col-md-offset-2 col-md-6"> <form method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="email">Choose any image file:</label> <input type="file" class="form-control" id="upload_image" name="upload_image" required accept="image/*" /> <br/> <img src="" id="previewIMG" /> </div> </form> </div> </div> <script> $(document).ready(function(){ function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#previewIMG').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#upload_image").change(function(){ readURL(this); }); }); </script> </body> </html> |
