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

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

问题描述

过去几天我一直在使用 rails,想知道在上传到 rails & 之前显示图像预览的最佳方式是什么?载波.

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/preview-of-an-image-before-it-is-uploaded/

编码简单快捷.

我把代码放在这里以防源代码失效:

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; 中上传之前显示图像预览的最佳方式载波的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

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