Rails點擊div上傳圖片

Question

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

目前這是我的標準圖片上傳按鈕在rails中的樣子。我想通過在頁面上使用背景圖像作爲佔位符來美觀地改善它，並且人們可以點擊該div來上傳圖像（當前由按鈕提供的功能），並且當圖像被上傳時，它變成div的背景。

回形針也處理上傳，並可以調整大小的div的大小。

我該如何在rails中做這樣的事情？由於

Answer 1

如果你想顯示你必須使用一個表單文件輸入一個瀏覽文件的提示。

你可以做的是將文件輸入完全放在div中，並在div移動時跟蹤鼠標。這樣，無論鼠標點擊div，文件輸入都將位於鼠標下方並顯示瀏覽器提示。

然後，您可以使用不透明度爲0

顯然，這種方法需要JavaScript的隱藏文件的輸入。

然後，您可以將onchange偵聽器應用於文件輸入，以便在選擇文件時將表單提交給隱藏的iframe。服務器上傳在iframe的圖像，然後打印。如果這個函數是在父窗口定義類似

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

....

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

這就是未經測試的代碼指向你在正確的方向。