2

I have an image button on my asp project that browse an image and display. I am using a script for my project.

This is my code:

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 working and the image is showing after I select the image but after a few seconds the image lost because the page reloads.

MMakati
  • 693
  • 1
  • 15
  • 33
  • Don't use Image Button. Use normal client-side `` element, and assign the `src` and `click` event in client side only. No need to involve server-side postback – Yuriy Galanter Feb 09 '14 at 04:36

2 Answers2

2

I solved my problem.

just add return false;.

 protected void Page_Load(object sender, EventArgs e)
    {
        imgBrowse.Attributes.Add("onclick", "document.getElementById('inpUploader').click(); return false;");
    }
MMakati
  • 693
  • 1
  • 15
  • 33
1

See this sample:

<asp:Button runat="server" Text="Button" UseSubmitBehavior="false" OnClientClick="alert('my client script here');my" />

<script type="text/javascript">

function my__doPostBack(eventTarget, eventArgument) {
    //Just swallow the click without postback of the form
}
</script>
Community
  • 1
  • 1