Question

我需要在提交表单之前预览图片。我使用Rails 3并需要与浏览器兼容的东西。有什么想法我能做到吗？

Answer 1

原来如此！ :)主要的想法是使用FileReader Javascript类，这对你需要做的事情非常方便。

您只需要在文件输入上侦听“change”事件，然后调用将使用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是服务器端，我认为你完全理解为什么。:)）

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

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

2 个答案: