Rails 3：上传前预览图像的最佳方式答案

【问题标题】：Rails 3: best way to preview image before uploadRails 3：上传前预览图像的最佳方式
【发布时间】：2013-08-13 21:39:51
【问题描述】：

我需要在提交表单之前预览图像。我使用 Rails 3，需要与浏览器兼容的东西。有什么想法可以实现吗？

【问题讨论】：

你应该看看：blueimp.github.io/jQuery-File-Upload。我知道...它是一个 JQuery 工具，而不是 Gem 或特殊形式的功能。但！它非常易于使用，并且在 RoR 中集成得非常好……另外，它将增强您的用户体验！如果您对使用此插件不感兴趣，我仍然可以发布答案并解释您如何实现您想要做的事情，因为我已经为一个项目完成了它。 :)
感谢库尔加的回答。我已经检查了宝石，但它确实不符合我的需求。实际上，我只想在用户按下提交按钮之前显示一张上传的图像。我还没有找到适用于 safari 的解决方案。
好的，我会发布我的答案。 :)
没有 Rails 也一样：stackoverflow.com/questions/14069421/…
类似但更关注 IE：stackoverflow.com/questions/5593866/…

标签： ruby-on-rails image upload preview

【解决方案1】：

所以！ :) 主要思想是使用 FileReader Javascript 类，这对于您需要做的事情非常方便。

您只需在文件输入上监听“更改”事件，然后调用将使用 FileReader 类的“readAsDataURL()”方法的方法。然后你只需要用方法的返回结果填充“预览img标签”的来源......

我已经给你写了一个simple jsFiddle 来实现你想要的。你可以在下面看到我的代码：

<!-- HTML Code -->
<div class="upload-preview">
    <img />
</div>
<input class="file" name="logo" type="file">

//JS File
$(document).ready(function(){
    var preview = $(".upload-preview img");

    $(".file").change(function(event){
       var input = $(event.currentTarget);
       var file = input[0].files[0];
       var reader = new FileReader();
       reader.onload = function(e){
           image_base64 = e.target.result;
           preview.attr("src", image_base64);
       };
       reader.readAsDataURL(file);
    });
});

在 Mozilla 文档中，您有 another example（肯定更强大）。此解决方案应适用于 Safari（版本 6.0+）。

这是我知道在提交表单之前预览图像的唯一方法，但我认为这是一种很常见的方法。当然，这与 Ruby On Rails 无关，因为我们在这里只使用 Javascript... 仅使用 Rails 是不可能的，因为您必须在渲染之前上传图像。（因为 Rails 是服务器端，我想你完全理解为什么。:)）

【讨论】：

非常感谢您的回答。我今天会尝试实现它:)
嗨 Kulgar，我需要安装任何东西（比如 jquery）才能使用上面的代码吗？
另外请告诉我我必须在哪里编写这些代码。我的意思是我必须在哪个文件中编写 javascript （在 assets/javascript/controller_name.js 下？） 以及我必须在哪个文件中编写 html 代码 （在 app/views 中？） b> 在铁轨上？抱歉，它可能太基础了，但我对 Rails 很陌生。
@learner：是的，你需要安装 JQuery 才能使用上面的代码，但问题是关于 Rails 3，JQuery-rails 通常是 Rails 项目中的默认 gem 之一，因此 JQuery 是在创建新应用程序时已经安装（使用 Rails 3.1+）。您宁愿将此代码放在与您正在呈现的视图关联的 controller_name.js 文件中，或者放在更通用的 js 文件中（但不在 application.js 中）。您所要做的就是百分百确保在您访问要显示上传图片预览的网页时加载您放置此代码的文件。
请注意，Mozilla 文档为您提供了不需要 JQuery 的示例：developer.mozilla.org/en-US/docs/…

【解决方案2】：

HTML：

<input type="file">
<div id="image_preview"></div>

JS（需要 jquery）：

$(document).ready(function(){
   $('input[type="file"]').change(function(){
     var image = window.URL.createObjectURL(this.files[0]);
     $("#image_preview").css("background-image", "url(" + image + ")");
   });
});

【讨论】：