Rails点击div上传图片

Question

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

目前，这是我的标准图片上传按钮在rails中的样子。我希望通过在页面上使用背景图像作为占位符的div来美观地改进它，并且人们可以点击该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+')';
}

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