Hi There, I need to Preview image before upload it. i am using file upload control... Is there any script available to do that or another way to achieve it... please let me know Thanks in advance.
If you want to preview image before it upload, I would like to suggest you try the following code, however, it only works in IE: (Tested by IE 6.0/7.0)
The best way to do it is to let the page postback and then save the file/image to a "temp" folder in your project or on the server. In the code behind, you'd create a dynamic image, set its imageurl equal to the
saved image on the server, and add the image where you want on your page. Then, you'd provide some sort of "Accept/Decline" system, where if the user clicked "Accept", the image would be moved to a "permanent" folder on the server. If the user clicked
"Decline", the file would be deleted completely. Does that make sense? Or are you just going to stick to the code that works only in IE?
Ramganeshv
Member
78 Points
112 Posts
How to Preview image before Upload
Sep 16, 2008 04:53 AM|LINK
susmitadeb
Participant
1052 Points
184 Posts
Re: How to Preview image before Upload
Sep 16, 2008 07:57 AM|LINK
Hi Ramganeshv ,
Check the below links :
http://forums.asp.net/p/1258433/2345298.aspx
http://forums.asp.net/p/962719/1197308.aspx
http://teck.in/javascript-to-preview-local-image.html
http://bytes.com/forum/thread94569.html
Hope this will help you.
Lance Zhang ...
All-Star
33091 Points
2361 Posts
Re: How to Preview image before Upload
Sep 18, 2008 02:00 AM|LINK
Hi Ramganeshv
If you want to preview image before it upload, I would like to suggest you try the following code, however, it only works in IE:
(Tested by IE 6.0/7.0)
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <style type="text/css"> #newPreview { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); } </style> <script language="javascript" type="text/javascript"> function PreviewImg(imgFile) { var newPreview = document.getElementById("newPreview"); newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgFile.value; newPreview.style.width = "80px"; newPreview.style.height = "60px"; } </script> </head> <body> <form id="form1" runat="server"> <div> preview <asp:FileUpload ID="Fud_Pic" runat="server" onchange="PreviewImg(this)" /> <div id="newPreview"> </div> </div> </form> </body> </html>Thanks.
udays1604
Member
4 Points
2 Posts
Re: How to Preview image before Upload
Mar 28, 2010 08:31 PM|LINK
thanks Lance for ur post it has wprked for me
jhpajiri
Member
19 Points
10 Posts
Re: How to Preview image before Upload
Aug 07, 2010 05:26 AM|LINK
Hi Lance thanks for the post, but, can you make a condition that only image can upload. and check alsothe file size of what limit.
Thanks
hoodedperson...
Star
12950 Points
3196 Posts
Re: How to Preview image before Upload
Aug 07, 2010 02:21 PM|LINK
The best way to do it is to let the page postback and then save the file/image to a "temp" folder in your project or on the server. In the code behind, you'd create a dynamic image, set its imageurl equal to the saved image on the server, and add the image where you want on your page. Then, you'd provide some sort of "Accept/Decline" system, where if the user clicked "Accept", the image would be moved to a "permanent" folder on the server. If the user clicked "Decline", the file would be deleted completely. Does that make sense? Or are you just going to stick to the code that works only in IE?
scrollLock
Member
255 Points
111 Posts
Re: How to Preview image before Upload
Mar 03, 2011 02:29 AM|LINK
is there a way preview will work on all browsers?