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

【问题标题】：Rails+javascript - image preview before uploadRails+javascript - 上传前的图片预览
【发布时间】：2011-08-01 10:05:24
【问题描述】：

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

它适用于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等浏览器中预览图片？

【问题讨论】：

能贴出浏览器会得到的html代码吗？

标签： javascript ruby-on-rails

【解决方案1】：

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

【讨论】：

【解决方案2】：

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>

【讨论】：

嘿 puce，您通过包含原始链接做得很好。您已经从原始链接中排除了这行代码<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>，并且代码仅在此行存在时才有效。你能帮我理解为什么这条线如此重要吗？
当然！我排除了它，因为它是 jQuery 的负载。 jQuery 是一个包含一些函数的 javascript 库，并且 (IMO) 有助于使您的代码更清晰（请向专家寻求更多技术性的解释）。拥有$('#img_prev') 的事实意味着存在 jQuery。问题是，在源代码中它正在加载一个非常旧版本的 jQuery，编码器应该尽可能地加载最新版本的 jQuery。无论如何，我会发表评论使其更清楚:)
那么可以离线加载jquery吗？我想离线运行我的应用程序。请帮忙。
绝对。转到 [jQuery 网站] (jquery.com/download)，将文件下载到本地服务器并使用 <script src="path/to/yourfile.js"></script>（当然要使用正确的路径）。

【解决方案3】：

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

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

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

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

Firefox 兼容 HTML5...

【讨论】：

【解决方案4】：

我已经为 IE 用户制作了一个带有后备的纯 JS 解决方案： http://mootools.standupweb.net/dragndrop.php

【讨论】：