ruby-on-rails - 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+')';
}

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