Rails 3：上传前预览图片的最佳方法。

Question

Rails 3：上传前预览图片的最佳方法。

13

在提交表单之前，我需要预览一张图片。我使用Rails 3，需要一个兼容各种浏览器的解决方案。有什么想法如何实现呢？

- Henri

1

你应该看一下：http://blueimp.github.io/jQuery-File-Upload/。我知道...它是一个JQuery工具，而不是Gem或特殊的表单功能。但是！它非常容易使用，并且在RoR中集成得非常好...此外，它将增强您的用户体验！如果您不想使用此插件，我仍然可以发布答案并解释如何实现您想要做的事情，因为我已经为一个项目完成了这个。 :) - Kulgar

谢谢你的回答，Kulgar。我已经检查了这个宝石，但它确实不符合我的需求。实际上，我只想在用户按下提交按钮之前显示一张已上传的图片。我还没有找到适用于Safari的解决方案。 - Henri

好的，那我会发布我的答案。 :) - Kulgar

没有使用Rails的情况下：https://dev59.com/V2Yq5IYBdhLWcg3w8VG8 - Ciro Santilli OurBigBook.com

类似但更专注于IE：https://dev59.com/questions/FG035IYBdhLWcg3wJcnT - Ciro Santilli OurBigBook.com

2个回答

1

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 + ")");
   });
});

- Abel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kulgar · Accepted Answer

所以! :) 主要的想法是使用FileReader Javascript类，这对你需要做的事情非常方便。

你只需要监听文件输入的"change"事件，然后调用一个方法，该方法将使用FileReader类的"readAsDataURL()"方法。然后，你只需用该方法返回的结果填充“预览图像标记”的源代码即可...

我为你编写了一个简单的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文档中，您可以找到另一个例子（肯定更加健壮）。这个解决方案应该可以在Safari（6.0版本及以上）中使用。

在提交表单之前预览图像的唯一方法是我所知道的，但我认为这是一个很常见的方式。当然，这与Ruby On Rails无关，因为我们只在这里使用Javascript......仅使用Rails是不可能做到的，因为您必须上传图像才能呈现它。（由于Rails是服务器端，我想您完全理解这个原因。: )