This post was most recently updated on August 5th, 2024
Demo: ImagePreview
Here is the source code for image preview before upload using jQuery:
<script src=”http://mundrisoft.com/js/jquery.min.js”></script>
<script type=”text/javascript”>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$(function () { Test = { UpdatePreview: function (obj) { if (!window.FileReader) { // don't know how to proceed to assign src to image tag } else { var reader = new FileReader(); var target = null; reader.onload = function (e) { target = e.target || e.srcElement; $("#img").prop("src", target.result); //$("img1").prop("src", target.result); }; reader.readAsDataURL(obj.files[0]); } } }; }); |
</script>
|
1 2 3 4 5 6 |
<body> <input type="file" name="file" onchange='Test.UpdatePreview(this)' accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp,image/tiff"> <br /> <img id="img" style="max-width: 330px; padding-top: 10px;" /> </body> |
Please drop comment if you have any question 🙂
