Rails divをクリックして画像をアップロード

Question

<div id="photo_attachment_container"> 
     <%= f.file_field :photo %> 
    </div> 

これは私の標準的な画像アップロードボタンがどのようにレールに表示されるかです。私はそれを美しいものにするために、ページ上にdivをプレースホルダとして背景画像とともに表示し、そのdivをクリックして画像（ボタンによって現在提供されている機能）をアップロードし、画像がアップロードされると、 divの背景。

また、paperclipはアップロードを処理し、divのサイズにリサイズできます。

レールでこれをどうすればいいですか？おかげ

Answer 1

あなたがフォームのファイル入力を使用する必要があり、閲覧ファイルプロンプトを表示したい場合。

あなたができることは、ファイル入力をdiv内に絶対配置し、divの周りでマウスを動かすことです。こうすることで、マウスがdivをクリックするたびに、ファイル入力がマウスの下に表示され、ブラウザのプロンプトが表示されます。

あなたはその後、明らかに、このメソッドはjavascriptが必要不透明度0

を使用してファイルの入力を非表示にすることができます。

ファイルの選択時にフォームを非表示のiframeに送信できるように、onchangeリスナーをファイル入力に適用できます。サーバは、iframe内に画像をアップロードしてから、この機能は、親ウィンドウで定義されている場合は

window.top.returnFileUrl('new-file-name.jpg'); 

のようなものを出力します....

function returnFileUrl(url) 
{ 
    document.getElementById('image-div').style.background = 'url('+url+')'; 
} 

右であなたを指すようにテストされていないコードであること方向。