Rails + javascript - предварительный просмотр изображения перед загрузкой

Я хочу показать предварительный просмотр изображения перед загрузкой, потому что я использую приведенный ниже код.

Он работает с firefox, но не работает с 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;
}

Есть ли какое-либо решение для предварительного просмотра изображения в IE8 и других браузерах?

Ответы

Ответ 1

Я использую https://github.com/blueimp/jQuery-File-Upload для загрузки файлов.

В спецификации этого плагина jQuery вы можете прочитать:

Предварительный просмотр изображений может быть загружен и отображен для локальных файлов изображений в браузерах, поддерживающих интерфейсы URL или FileReader.

IE8 не совместим с HTML5, поэтому он несовместим с FileReader. Вы должны использовать flash или друзей, чтобы достичь этого.

Firefox совместим с HTML5...

Ответ 2

Это решение работает как шарм и имеет условную нагрузку для Internet Explorer, поэтому он должен работать на вас.

Я помещаю код здесь на всякий случай, когда источник умирает:

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>

В 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>

Ответ 3

В ERB: сделайте ввод и дайте ему имя класса и динамический идентификатор, а также создайте тег изображения с dyanamic id, где вы увидите изображение предварительного просмотра.

<%= f.file_field :photo, :class => 'photo_upload', :id => "image_#{image.id}" %>  
<%= image_tag("preview.png", :id => "image_#{image.id}_medium") %>

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