Preview image before Upload

Posted by hareeshkumarkr-16190 under ASP.NET on 7/14/2012 | Points: 10 | Views : 3556 | Status : [Member] | Replies : 1
hi

I need to Preview image before upload it. i am using file upload control...

please let me know Thanks in advance.



--hareeshkumar--




Responses

Posted by: Premalatha on: 7/15/2012 [Member] Starter | Points: 25

Up
0
Down
http://stackoverflow.com/questions/8815207/how-to-show-preview-of-image-being-uploaded-before-actually-sending-it-to-server
http://forums.asp.net/t/1560855.aspx/1
For Firefox. Because of security it has a truncated path. However, they have provided other ways of doing this:

var img = document.createElement("IMG");
if(document.all)
img.src = document.getElementById('submit').value;
else
// Your solution for Firefox.
img.src = document.getElementById('submit').files.item(0).getAsDataURL();
document.getElementById('div').appendChild(img);
The below is working in Internet Explorer 7 and Firefox 3.

<style type="text/css">
#prevImage {
border: 8px solid #ccc;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
function setImage(file) {
if(document.all)
document.getElementById('prevImage').src = file.value;
else
document.getElementById('prevImage').src = file.files.item(0).getAsDataURL();
if(document.getElementById('prevImage').src.length > 0)
document.getElementById('prevImage').style.display = 'block';
}
</script>
<pre>
IE8 needs a security settings change: internet settings, security, custom level :

[] Include local directory path when uploading files to a server
( ) Disable
(o) Enable
</pre>
<form>
<input type="file" name="myImage" onchange="setImage(this);" />
</form>
<img id="prevImage" style="display:none;" />

Premalatha
Software Engineer

hareeshkumarkr-16190, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response