Question

我想在上传之前显示图片预览，因为我使用下面给出的代码。

它适用于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和其他浏览器中预览图像？

Answer 1

This解决方案就像魅力一样，并且具有Internet Explorer的条件加载功能，因此它应该适合您。

我把代码放在这里，以防源死：

脚本：

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

Answer 2

在ERB中：接受输入，并为其指定一个类名和动态ID，并制作带有动态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);
});

Answer 3

我确实使用https://github.com/blueimp/jQuery-File-Upload进行文件上传。

在这个jQuery插件的规范中，您可以阅读：

可以在支持URL或FileReader接口的浏览器上为本地图像文件加载和显示预览图像。

IE8不符合HTML5，因此与FileReader不兼容。您应该使用flash或朋友来实现这一目标。

Firefox符合HTML5标准......

Answer 4

我为IE用户制作了一个纯JS解决方案： http://mootools.standupweb.net/dragndrop.php

Rails + javascript - 上传前的图片预览

4 个答案: