Question

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

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

Answer 1

如果您在上传之前只需要在表单中进行图像预览，那么您（就像我一样）会看到JQuery上传插件太复杂而且不太容易正常运行（我能够看到预览，但后来我无法上传图片。）

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

Answer 2

你可以使用它是完整解决方案的插件jQuery File Upload，但如果你需要不那么健壮的东西，你也可以尝试直接使用FileReader，例如this，这样你就可以自定义任何你需要的功能。

Answer 3

根据文件image_cache显示您要上传的内容。

<%= f.hidden_field :image_cache %>

在rails＆amp;上传之前显示图片预览的最佳方式carrierwave

3 个答案: