在rails和carrierwave中上传之前显示图像预览的最佳方式
Posted
技术标签:
【中文标题】在rails和carrierwave中上传之前显示图像预览的最佳方式【英文标题】：Best way to show image previews before upload in rails & carrierwave 【发布时间】：2012-07-14 05:14:00 【问题描述】：过去几天我一直在使用 rails，想知道在上传到 rails 和 carrierwave 之前显示图像预览的最佳方式。
我遇到了一些选项，例如使用 plupload 或 jquery 文件上传或使用 uploadify。
【问题讨论】：
【参考方案1】：如果您只需要在上传之前在表单中预览图像，您（和我一样）会发现 JQuery Upload 插件太复杂而且不太容易正常运行（我能够看到预览，但后来我无法上传图片）。
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
编码简单快捷。
我把代码放在这里以防源代码失效：
脚本：
<!-- Assume jQuery is loaded -->
<script>
function readURL(input)
if (input.files && input.files[0])
var reader = new FileReader();
reader.onload = function (e)
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200);
;
reader.readAsDataURL(input.files[0]);
</script>
在 html 中：
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" />
</body>
【讨论】：
我认为它使用了一些 HTML5 功能，这可能是原因。 IE 没有 FileReader 类 @Puce 用于多个图像MDN has a good example。这个 MDN 页面还显示了浏览器兼容性【参考方案2】：您可以使用插件jQuery File Upload，它是一个完整的解决方案，但如果您需要一些不太强大的东西，您也可以尝试直接使用FileReader，例如this，这样您就可以根据需要自定义功能.
【讨论】：
【参考方案3】：根据文件image_cache 显示您正在上传的内容。
<%= f.hidden_field :image_cache %>
【讨论】：
哪个文件？有什么参考资料吗？ 如果您提供对文档的任何参考，那就更好了。 github.com/carrierwaveuploader/… 此功能用于跨提交重新显示，而不是用于预览。 我使用了这个功能，但是如果用户去他的个人资料更改他的姓氏，它需要他再次上传图片，尽管它已经在之前的会话中加载，并且图片可见。不知道如何处理。以上是关于在rails和carrierwave中上传之前显示图像预览的最佳方式的主要内容，如果未能解决你的问题，请参考以下文章
使用 React、Ruby on rails 5 和 CarrierWave 多次上传文件
Rails：上传 dropzone、S3、carrierwave，不能在 Safari 中工作，但在 Google Chrome 中工作
Rails Carrierwave和Imagemagick，使用条件调整图像大小