レール＆キャリアウェーブにアップロードする前に画像プレビューを表示する最善の方法

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

私はpluploadやjqueryファイルのアップロードやuploadifyの使用のようないくつかのオプションを見つけました。

2012-07-14 random

あなただけアップロードする前に、フォームの画像のプレビューが必要な場合は、（私のように）あなたはjQueryのアップロードプラグインが正常に実行するので、簡単にあまりにも多くの複雑ではないことがわかりますが（私はプレビューを見ることができました、しかし私は写真をアップロードできませんでした）。

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

これは、コードにシンプルかつ高速です。

私はソースが死ぬ念のためにここにコードを置く：

スクリプト：HTMLで

<!-- 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>

：文書

<!--[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-22 22:55:01 Puce

これはIEで動作しません – Rodrigo

私はそれがおそらく原因であるいくつかのHTML5機能を使用していると思います。 – Puce

IEには複数の画像[MDNには良い例があります]（https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL）のFileReaderクラス – Rodrigo

あなたはそれが完全なソリューションですが、あなたはあまり堅牢な何かが必要な場合、あなたはまたthisのように、直接FileReaderを使用して試すことができますので、あなたには何が必要に機能をカスタマイズすることができ、プラグインjQuery File Uploadを使用することができます。

出典

2012-08-20 18:23:20 davidmh

image_cacheには、アップロードしているものが表示されています。

<%= f.hidden_field :image_cache %>

出典

2012-12-21 17:31:08 KennyVB

を？どんな参考資料もありますか？ – Rubyrider

文書への参照を提供した方が良いでしょう。 – learner

https://github.com/carrierwaveuploader/carrierwave#making-uploads-work-across-form-redisplays –

レール＆キャリアウェーブにアップロードする前に画像プレビューを表示する最善の方法

答えて

関連する問題