I have a project in ASP where I have an image button that allows users to browse an image and display it. I am utilizing a script for this project.
Here is the code I am using:
ASPX:
<asp:Panel ID="stage" runat="server" cssClass="containment-wrapper" style="border:1px solid #000000;">
<asp:ImageButton ID="imgBrowse" runat="server" Height="375px" Width="640px" src="#" />
<input type='file' id="inpUploader" style="visibility: hidden;"/>
</asp:Panel>
JS source:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#imgBrowse').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#inpUploader").change(function () {
readURL(this);
});
CS:
protected void Page_Load(object sender, EventArgs e)
{
imgBrowse.Attributes.Add("onclick", "document.getElementById('inpUploader').click();");
}
My code is functioning correctly and the image appears when selected. However, after a few seconds, the image disappears due to the page reloading.