Rails 3:上传前预览图像的最佳方式
我需要在提交表单之前预览图像。 我使用Rails 3并需要与浏览器兼容的东西。 有什么想法我能做到吗?
所以! :)主要的想法是使用FileReader Javascript类,这对你需要做的事情非常方便。
您只需要在文件输入上侦听“更改”事件,然后调用将使用FileReader类的“readAsDataURL()”方法的方法。 然后你只需要用方法的返回结果填充“预览img标签”的来源……
我给你写了一个简单的jsFiddle来实现你想要的东西。 你可以在下面看到我的代码:
//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是服务器端,我认为你完全理解为什么。:))
HTML:
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 + ")"); }); });