イメージをアップロードしてjQueryとRailsでリフレッシュせずに表示する方法は？

Question

私はフォームが送信ボタンを持っていない

<form ...>  
    <input type="file" id="upload"></input> 
</form> 

のようなもの、私はそれを置き換えるためにDIVを作る画像の使用をアップロードする：

<div id="submit"></div> 

私はdiv要素をクリックしたときにことを願っていますの画像はアップロードされ、次に更新されずに別の画像に表示されます。

私はajaxを使用する必要があると知っていますが、jQueryとRailsでどのように実現するのか分かりません。続き

は私の質問です：

1. 私は$ .postを使用しようとしましたが、$（ "＃アップロード"）方法

   をコントローラにアップロードされたファイルを投稿するのval（）だけを返します。ファイルパス、コンテンツなし。

2. これは私の目標を達成するための私の考えです、それは働くことができますか？

   （1）、をクリックします。（ "＃が提出"）$に関数をバインドするコントローラにファイルを投稿

   （2）コントローラは、/パブリックフォルダ内のファイルを保存するファイルのURLをレンダリング

   （3）私の考えはどんな問題がある場合は、URL

   にいくつかのSRCを設定したの$ .postのコールバックとして関数を定義し、

   ありがとう...私は正しい方法を教えてください!!

Answer 1

最良の解決策は、問題を解決するのに役立つjQuery pluginを使用することです。

画像がアップロードされると、画像への返信としてJSONが返されます。

次に、画像のjQueryまたは純粋なJavaScriptの「src」属性を使用して更新します。成功アップロード時にデータがJSONは、サーバーからユーザーに返され

$('#id-of-your-image').attr(src, data.url); 

を実行するための

JSON

{ url: "http://example.com/uploads/image-222.jpg" } 

JS。