Rails+javascript - Image Preview Before Upload
Solution 1:
In 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:
functionreadURL(input) {
if (input.files && input.files[0]) {
var reader = newFileReader();
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);
});
Solution 2:
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>functionreadURL(input) {
if (input.files && input.files[0]) {
var reader = newFileReader();
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><inputtype='file'onchange="readURL(this);" /><imgid="img_prev"src="#"alt="your image" /></body>Solution 3:
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...
Solution 4:
I had made a pure JS solution with fallback for IE users: http://mootools.standupweb.net/dragndrop.php
Post a Comment for "Rails+javascript - Image Preview Before Upload"