Rails 點擊 div 上傳圖片

Question

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

目前，這是我的標准圖像上傳按鈕在 rails 中的外觀。 我想通過在頁面上有一個帶有背景圖像作為占位符的 div 來從美學上改進它，人們可以單擊該 div 來上傳圖像（按鈕當前提供的 function），當圖像被上傳時它變成div 的背景。

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

我怎么能在rails中做這樣的事情？ 謝謝

Answer 1

如果要顯示瀏覽文件提示，則必須使用表單文件輸入。

您可以做的是 position 文件輸入絕對在 div 內，並在鼠標移動時跟蹤 div 周圍的鼠標。 這樣，無論鼠標在 div 上單擊何處，文件輸入都將在鼠標下方並顯示瀏覽器提示。

然后，您可以使用 opacity 0 隱藏文件輸入。

顯然這種方法需要javascript。

然后，您可以將 onchange 偵聽器應用於文件輸入，以便在選擇文件時將表單提交到隱藏的 iframe。 服務器上傳 iframe 中的圖像，然后打印類似

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

如果這個 function 在父 window 中定義......

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

那是未經測試的代碼，可以為您指明正確的方向。