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 | <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Preview Image before Upload using jQuery</title> <style type="text/css">form{float: left;width: 100%;}.div-center img{float: left;margin-top: 20px;}embed{float: left;margin-top: 20px;}</style></head><body><div class="container"> <div class="row"> <div class="col-lg-12"> <div class="div-center"> <form method="post" action="" enctype="multipart/form-data" id="uploadForm"> <input type="file" name="file" id="file" /> </form> </div> </div> </div></div> <script>function filePreview(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#uploadForm + embed').remove(); $('#uploadForm').after('<embed src="'+e.target.result+'" width="450" height="300">'); } reader.readAsDataURL(input.files[0]); }}$("#file").change(function () { filePreview(this);});</script></body></html> |
