Preview Image in ASP.NET

Question

I have to first preview the image and then save it to DB. After numerous attempts to hide the "Ajax fileUpload control's textbox", I settled down with this simple advice - use html fileupload control, hide it, but use an asp button to invoke the html control. All Ok till now.

ASPX:

<asp:Panel ID="pnlImage" runat="server" Height="120px" Width="120px"> 
   <asp:Image ID="imageBox" runat="server"/>                      
</asp:Panel>

<input type="file" id="selectedFile" name="_selectedFile"/> //will hide this later
<asp:Button ID="btnBrowse" runat="server" Text="Browse" CausesValidation="false" 
 OnClientClick="document.getElementById('selectedFile').click(); return false;"
 onclick="btnBrowse_Click" />

CS:

protected void btnBrowse_Click(object sender, EventArgs e)
{
    string strValue = Page.Request.Form["_selectedFile"].ToString();        
}

When I click on the browse button, I get the pop up to browse a file. After I select a picture, the local path "C:\\pictures....." fills into the Html control's textbox.

1. But the problem here is, it does not go to the code behind (because of return:false). If I say return:true, it does, but the local path just blinks and disappears from the textbox. So strValue is empty. !

2. I also tried, setting causesvalidation & return to true. For this i have to fill all other reqd. fields on page. Though it goes to code behid, the strValue has only the name(user1.jpg) instead of the path.

I find this method simple than other javascript/jquery. How should i proceed from here.

Answer 1

When you return false then definitely the button won't click and when you'll return true the button would click but the value from the client side input control will be lost. Have a look at this: Retaining Control/Elements values changed via Client side on postbacks

Answer 2

看看使用Cs在ASP NET图像控件中的此预览图像 ...这是提供图像预览功能的一种非常简洁的方法。