13

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?

1
  • Can you post the html code, which the browser will get?
    – Reporter
    Commented Apr 8, 2011 at 12:22

4 Answers 4

7

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:

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);
});
5

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>
4
  • Hey puce, you did good by including the original link. You have excluded this line of code <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> from the original link, and the code is working only if this line exists. Can you please help me understand why this single line is so important?
    – learner
    Commented Feb 13, 2015 at 15:23
  • Sure! I excluded it because it is the load of jQuery. jQuery is a javascript library that wraps some functions and (IMO) helps making your code cleaner (ask an expert for a more technical explanation). The fact of having $('#img_prev') implies that jQuery is present. The thing is, in the source it's loading a very old version of jQuery, the coder should aim to load the most recent version of jQuery whenever is possible. Anyway, I will put a comment making it clearer :)
    – Puce
    Commented Feb 13, 2015 at 15:40
  • Then is it possible to load jquery offline? I want to run my application offline. Please help.
    – learner
    Commented Feb 13, 2015 at 15:56
  • 1
    Absolutely. Go to [jQuery website] (jquery.com/download), download the file to your local server and use <script src="path/to/yourfile.js"></script> (Use correct paths of course).
    – Puce
    Commented Feb 13, 2015 at 16:01
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...

0

I had made a pure JS solution with fallback for IE users: http://mootools.standupweb.net/dragndrop.php

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.