在rails&上传之前显示图片预览的最佳方式carrierwave [英] Best way to show image previews before upload in rails & carrierwave

查看:199
本文介绍了在rails&上传之前显示图片预览的最佳方式carrierwave的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

过去几天我一直在使用rails,想知道在上传之前显示图片预览的最佳方式是什么? carrierwave。

I've been using rails for past few days and wanted to know what is best way to show image previews before upload in rails & carrierwave.

我遇到了一些选项,比如使用plupload或jquery文件上传或使用uploadify。

I came across a few options like using plupload or jquery file upload or using uploadify.

推荐答案

如果您在上传之前只需要在表单中预览图像,那么您(就像我一样)会看到JQuery Upload插件只是太复杂,不太容易正常运行(我能够看到预览,但我无法上传图片)。

If you only need image preview in a form before upload, you (as me) will see that JQuery Upload plugin is just too much complex and not so easy to run properly (I was able to see the preview, but then I couldn't upload the picture).

http://saravani.wordpress.com/2012 / 03/14 /在上传之前预览图像/

编码简单快捷。

我把代码放在这里以防万一来源死掉:

I put the code here just in case the source dies:

脚本:

    <!-- 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="#" alt="your image" />
    </body>

这篇关于在rails&amp;上传之前显示图片预览的最佳方式carrierwave的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆