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

Question

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

Answer 1

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

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

我给你写了一个简单的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是服务器端,我认为你完全理解为什么.:))