显示在轨道与carrierwave上传之前预览图像的最佳方法(Best way to show im

2019-06-26 07:15发布

我已经使用了过去几天的轨道,想知道什么是显示上传中轨及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的文件上传 ,它是一个完整的解决方案,但如果你需要不太可靠的东西,你也可以尝试使用的FileReader直接,像这样 ,所以你可以自定义任何你需要的功能。



Answer 3:

根据该文件image_cache正显示出您所上传的内容。

<%= f.hidden_field :image_cache %>


文章来源: Best way to show image previews before upload in rails & carrierwave