Top Posts
Top Rated
Categories
- Git (2)
- Programming (7)
- Rails (8)
- ROR (7)
- Ruby (7)
- Thrift (1)
- Uncategorized (3)
Sarav's Weblog
Technical Articles for RoR Developers
Preview of an image before it is uploaded
Might be a old topic. But still, it will be useful for the beginners.
Using jQuery we can achieve this, The preview action will be executed all in the browser without using Ajax to upload the image. Here is the example,
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>
Hello,
I can see that there is a bug in your code. When I upload a file, the image does not preview immediately. Preview happens after uploading new file.
okay, i have already fixed the bug. In my case, I just replaced “input.files && input.files[0]” in the condition with the current value of the file field. It worked. ^^,
@pchan_august – Cool
I don’t know why it’s not working. Itried to understand what pchan_august said, but after thousand changes, nothing happens!
Hello ,
This is not working in IE.Can you please suggest me tha how it will work in iE ?
Thanks in advance
Hey cool,
I was searching for this functionality. Thanks for the Post.
I encounter lots and lots of this kind of sample. But not working in IE. Any suggestion?????
This is not working in IE.Can you please suggest me tha how it will work in iE ?
This is not working in IE.Can you please suggest me tha how it will work in iE ? other wise it is useless
Test
function showPreview(ele)
{
$(‘#imgAvatar’).attr(‘src’, ele.value); // for IE
if (ele.files && ele.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(‘#imgAvatar’).attr(‘src’, e.target.result);
}
reader.readAsDataURL(ele.files[0]);
}
}
Try just
<!–
–>
Test use this script in form and input type file, name filUpload,id filUpload onchang showPreview(this) and img id is imgAvatar
function showPreview(ele)
{
$(‘#imgAvatar’).attr(‘src’, ele.value); // for IE
if (ele.files && ele.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(‘#imgAvatar’).attr(‘src’, e.target.result);
}
reader.readAsDataURL(ele.files[0]);
}
}
<!–
–>
add js http://code.jquery.com/jquery-latest.js
Thanks dear …………. it works
its not working form mo on IE please help me out
i tried ur example its working ,thanks
Hi am try this what m search it that . a bug in IE its not work so any one solve this
please help.
thanks in advance
doesn’t work in safari 5.x.x how i could i use this for safari browser………???
it’s not working on IE !! anyone solved that??
Hi there,
You just saved my day.
I paste here the code of unobtrusive javascript, that everybode loves
$(document).ready(function(){
$(“#fileFieldId”).change(function(){
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(‘#img_prev’).attr(‘src’, e.target.result).width(150).height(200);
};
reader.readAsDataURL(this.files[0]);
}
});
});
You just have to put the id of your file field and it will work as a charm. (Don’t forget the div which contains the image to preview
)
thanks
Thank you. Its working in Chrome and FireFox, but not in Safari.. Please help me to fix it?
Thank you
Pingback: Cakephp | Membuat Thumbnail Image (Upload File) dengan Js ImgAreaSelect