Upload and preview image in client side without posting back

Posted by Ahmy on Stack Overflow See other posts from Stack Overflow or by Ahmy
Published on 2010-06-12T12:56:22Z Indexed on 2010/06/12 13:02 UTC
Read the original article Hit count: 225

Filed under:

ASP.NET

|

client-side

I need to upload an image and then preview it without posting back as i need to have a file upload control(even HTMLinputfile or ASPfileupload) then the user will browse to select image after selecting (browsing) there will a button(HTMLInputButton) that will save the uploaded image and preview it.

I have the following code :

<div>
    <input id="UploadInput" type="file" value="Upload" />
    <br />
    <input id="PreviewBtnInput" type="button" value="Preview" onclick="ShowPreview()" /> 
    <br />
    <img id="ImgUploaded"  />
</div>

So how can i do this task ?

Thanks in advance for any reply but please if any one has a link for article that talk about this issue please i need a clear code not article details.

© Stack Overflow or respective owner

Related posts about ASP.NET

Migrating ASP.NET MVC 1.0 applications to ASP.NET MVC 2 RTM

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
Note: ASP.NET MVC 2 RTM isn’t yet released! But this tool will help you get your ASP.NET MVC 1.0 applications ready for when it is! I have updated the MVC App Converter to convert projects from ASP.NET MVC 1.0 to ASP.NET MVC 2 RTM. This should be last the last major change to the MVC App Converter… >>> More
April 14th Links: ASP.NET, ASP.NET MVC, ASP.NET Web API and Visual Studio

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
Here is the latest in my link-listing blog series: ASP.NET Easily overlooked features in VS 11 Express for Web: Good post by Scott Hanselman that highlights a bunch of easily overlooked improvements that are coming to VS 11 (and specifically the free express editions) for web development: unit… >>> More
Use ASP.NET 4 Browser Definitions with ASP.NET 3.5

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
We updated the browser definitions files included with ASP.NET 4 to include information on recent browsers and devices such as Google Chrome and the iPhone. You can use these browser definition files with earlier versions of ASP.NET such as ASP.NET 3 Read More......(read more) >>> More
ASP.NET webforms + ASP.NET Ajax versus ASP.NET MVC and Ajax framework freedom

as seen on Stack Overflow - Search for 'Stack Overflow'
If given the choice, which path would you take? ASP.NET Webforms + ASP.NET AJAX or ASP.NET MVC + JavaScript Framework of your Choice Are there any limitations that ASP.NET Webforms / ASP.NET AJAX has vis-a-vis MVC? >>> More
ASP.NET MVC 2 Released

as seen on ASP.net Weblogs - Search for 'ASP.net Weblogs'
I’m happy to announce that the final release of ASP.NET MVC 2 is now available for VS 2008/Visual Web Developer 2008 Express with ASP.NET 3.5. You can download and install it from the following locations: Download ASP.NET MVC 2 using the Microsoft Web Platform Installer Download… >>> More

Related posts about client-side

Automate Pen Testing with Fast-Track Client-Side Attacks

as seen on Internet.com - Search for 'Internet.com'
If you've got a browser and a spare computer, you can run penetration tests using Fast-Track's mass client-side attacks in no time. >>> More
Take Control Of Web Control ClientID Values in ASP.NET 4.0

as seen on 4 Guys From Rolla - Search for '4 Guys From Rolla'
Each server-side Web control in an ASP.NET Web Forms application has an ID property that identifies the Web control and is name by which the Web control is accessed in the code-behind class. When rendered into HTML, the Web control turns its server-side ID value into a client-side id attribute.… >>> More
Take Control Of Web Control ClientID Values in ASP.NET 4.0

as seen on Dot net Slackers - Search for 'Dot net Slackers'
Each server-side Web control in an ASP.NET Web Forms application has an ID property that identifies the Web control and is name by which the Web control is accessed in the code-behind class. When rendered into HTML, the Web control turns its server-side ID value into a client-side id attribute. Ideally… >>> More
Cross-site json rpc : Python server side and Mozilla extension using Javascript client side

as seen on Stack Overflow - Search for 'Stack Overflow'
hello, I am building a mozilla extension that contacts a python application on a remote server to send and receive data. The python application can be used using xml-rpc from a python console.I am given the task to design a json-rpc that would contact the same application.Making the python server… >>> More
Client side caching in GWT

as seen on Stack Overflow - Search for 'Stack Overflow'
We have a gwt-client, which recieves quite a lot of data from our servers. Logically, i want to cache the data on the client side, sparing the server from unnecessary requests. As of today i have let it up to my models to handle the caching of data, which doesn't scale very well. It's also become… >>> More