Rails 点击 div 上传图片

Question

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

目前这是我的标准图片上传按钮在 Rails 中的外观。我想通过在页面上有一个带有背景图像作为占位符的 div 来从美学上改进它，人们可以单击该 div 来上传图像（按钮当前提供的功能），当图像被上传时，它就变成了div 的背景。

还回形针处理上传，并可以调整到 div 的大小。

我怎样才能在 Rails 中做这样的事情？谢谢

Answer 1

如果要显示浏览文件提示，则必须使用表单文件输入。

您可以做的是将文件输入绝对定位在 div 内，并在鼠标移动时跟踪 div 周围的鼠标。这样，无论鼠标在哪里点击 div，文件输入都会在鼠标下方并显示浏览器提示。

然后您可以使用 opacity 0 隐藏文件输入。

显然这种方法需要javascript。

然后，您可以对文件输入应用 onchange 侦听器，以便在选择文件时将表单提交到隐藏的 iframe。服务器将图像上传到 iframe 中，然后打印类似

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

如果这个函数是在父窗口中定义的......

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

这是指向正确方向的未经测试的代码。