Question

I want to set the Image URL of Image control using client side code and save the image to the server using C# code. Here is what i have implemented:

<asp:Button ID="btnImageUpload" OnClick="btnImageUpload_Click"  runat="server" Text="Preview" CausesValidation="false" OnClientClick="Image_View();"/>

C# Code:

protected void btnImageUpload_Click(object sender, EventArgs e)
{
    if (Directory.Exists(@"C:\\Images"))
        SaveImage_Server();
    else
    {
        Directory.CreateDirectory(@"C:\\Images");
        SaveImage_Server();
    }
}
    public void SaveImage_Server()
    {
        try
        {
            if (FlUpldImage.PostedFile.ContentLength > 0)
            {
                String fn = Convert.ToString(DateTime.Now) + Path.GetFileName(FlUpldImage.FileName);
                if (fn.Contains('/'))
                {
                    fn = fn.Replace("/", "");
                }
                if (fn.Contains(':'))
                {
                    fn = fn.Replace(":", "");
                }
                if (fn.Contains(" "))
                {
                    fn = fn.Replace(" ", "");
                }
                String Saved_ImagePath = @"C://Images/" + fn; // making the path with created dynamically folder name
                FlUpldImage.SaveAs(Saved_ImagePath);
                HidnLocalImageURL.Value = Saved_ImagePath;

            }
        }
        catch (Exception re)
        { 
        }
    }

JavaScript

    function Image_View() {
//        __doPostBack('<%= btnImageUpload.ClientID %>', '');

//        var clickButton = document.getElementById("<%= btnImageUpload.ClientID %>");
//        clickButton.click()

        var idFlUpload = '<%= FlUpldImage.ClientID %>';
        var fu1 = document.getElementById(idFlUpload);
        var idImgCntrl = '<%= imgCorrect.ClientID %>';
        var ImgCntrl = document.getElementById(idImgCntrl);

        alert("You selected " + fu1.value);
        ImgCntrl.setAttribute('src', fu1.value);
    }

Now my issue is that once the server side code is executed the page gets refreshed and the link set to Image control using JS gets reset to default value.

How can i get this working wherein the image also gets saved and Image URL property also gets set through JS.

If there is any other way to implement this than please let me know. Thanks in Advance!

Answer 1

You have to set it on server too. You can use hidden field to save the url and access that hidden field on server to get the url to set mgCntrl.ImageUrl

In html

<input type="hidden" runat="server" id="hdnImageSrc" />

On Client javascript

hdnImageSrc = document.getElementById('<%= hdnImageSrc.ClientID %>');
mgCntrl.setAttribute('src', fu1.value);
hdnImageSrc.value = fu1.value;

On server side code

mgCntrl.ImageUrl = hdnImageSrc.Value;