I want change profile image, click on image then open FileUpload and choose new profile photo and display on img.
Hi sani.ss501,
Refer below sample code.
HTML
<img id="imgFileUpload" alt="Select File" title="Select File" src="https://i.imgur.com/73e8Dja.png" style="cursor: pointer" /> <br /> <span id="spnFilePath"></span> <br /> <img id="imgFile" height="200" width="200" /> <input type="file" id="FileUpload1" style="display: none" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function () { var fileupload = $("#FileUpload1"); var filePath = $("#spnFilePath"); var image = $("#imgFileUpload"); image.click(function () { fileupload.click(); }); fileupload.change(function () { var fileName = $(this).val().split('\\')[$(this).val().split('\\').length - 1]; filePath.html("<b>Selected File: </b>" + fileName); var reader = new FileReader(); reader.onload = function (e) { $("#imgFile").attr("src", e.target.result); } reader.readAsDataURL($(this)[0].files[0]); }); }); </script>
Demo
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.