I want to show an image preview before upload, for that I am using the code given below.
It works with firefox, but doesn't work with IE8
<%= image_tag @image, :id=>"preview-photo" %>
<%= file_field 'image','photo', :onchange => "preview(this);" %>
function preview(this) {
document.getElementById("preview-photo").src = this.value;
return;
}
Is there any solution to preview the image in IE8 and other browsers?
I want to show an image preview before upload, for that I am using the code given below.
It works with firefox, but doesn't work with IE8
<%= image_tag @image, :id=>"preview-photo" %>
<%= file_field 'image','photo', :onchange => "preview(this);" %>
function preview(this) {
document.getElementById("preview-photo").src = this.value;
return;
}
Is there any solution to preview the image in IE8 and other browsers?
Share Improve this question edited Feb 3, 2015 at 11:57 Puce 1,02114 silver badges28 bronze badges asked Apr 8, 2011 at 10:36 lamrinlamrin 1,4414 gold badges22 silver badges34 bronze badges 1- Can you post the html code, which the browser will get? – Reporter Commented Apr 8, 2011 at 12:22
4 Answers
Reset to default 7In ERB: Take input, and give it a class name and dynamic id, and also make a image tag with dyanamic id where you will show the preview pic.
<%= f.file_field :photo, :class => 'photo_upload', :id => "image_#{image.id}" %>
<%= image_tag("preview.png", :id => "image_#{image.id}_medium") %>
In JAVASCRIPT:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$(document.getElementById(input.id + "_medium")).attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$(".photo_upload").change(function(){
readURL(this);
});
This solution works like a charm and has a conditional load for Internet Explorer so it should work for you.
I put the code here just in case the source dies:
Script:
<!-- Assume jQuery is loaded -->
<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>
In the HTML:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
I do use https://github.com/blueimp/jQuery-File-Upload for file uploads.
In the spec of this jQuery plugin, you can read:
Preview images can be loaded and displayed for local image files on browsers supporting the URL or FileReader interfaces.
IE8 is not HTML5 compliant thus not compatible with FileReader. You should use flash or friends to achieve that.
Firefox is HTML5 compliant...
I had made a pure JS solution with fallback for IE users: http://mootools.standupweb.net/dragndrop.php