How to Preview or show an image before uploaded do you want to show image on your website How to Preview or show an image before uploaded so you need to implement Javascript in your web page then got preview on your website. How to Preview or show an image before uploaded You can Implement this code in asp.net of php web application. First Step: You Need to put this code in Under Your Head Tag. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Second Step Under body Tag you need to place this code right now. <form runat="server"> <input type='file' id="fileuploadID" /> <img id="imgTagId" src="#" alt="your image" /> </form> Third Step Before closing body tag place this code <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imgTagId').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#fileuploadID").change(function() { readURL(this); }); </script> Final Step <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> </head> <body> <form runat="server"> <input type='file' id="fileuploadID" /> <img id="imgTagId" src="#" alt="your image" /> </form> <script type="text/javascript"> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#imgTagId').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#fileuploadID").change(function() { readURL(this); }); </script> </body>