ruby-on-rails - rails 3 : best way to preview image before upload

Question

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

Answer 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 是服务器端，我想你完全理解为什么。:))