14

私は過去数日間レールを使用しており、レールとキャリアウェーブにアップロードする前に画像プレビューを表示する最良の方法を知りたいと思っていました.

plupload または jquery ファイルのアップロードを使用するか、uploadify を使用するなど、いくつかのオプションに出くわしました。

4

3 に答える 3

21

アップロード前にフォームで画像のプレビューのみが必要な場合は、(私のように) 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="#" alt="your image" />
    </body>
于 2013-04-22T22:55:01.937 に答える
5

完全なソリューションであるプラグインjQueryFileUploadを使用できますが、堅牢性の低いものが必要な場合は、このようにFileReaderを直接使用してみることもできるため、必要に応じて機能をカスタマイズできます。

于 2012-08-20T18:23:20.083 に答える
1

ドキュメントによると、image_cacheアップロードしているものを示しています。

<%= f.hidden_field :image_cache %>
于 2012-12-21T17:31:08.267 に答える