如何自定义rails文件上传表单

Posted 2023-02-15

【中文标题】如何自定义rails文件上传表单

【英文标题】：How to customize rails file upload form

【发布时间】：2021-07-26 10:03:14

【问题描述】：

我正在使用 Rails 6 activestorage 上传照片。我想自定义文件上传按钮的外观（使用 Bulma css 框架）。我试过这些：

        <div class="file" style="margin-top:10px;">
        <label class="file-label">
        <span class="file-cta">
        <span class="file-icon">
        <i class="fas fa-upload"></i>
        </span>
        <%= form.file_field :images, multiple: true, direct_upload: true, class:" ", placeholder:"", style:"" %>

        </span>
        </label>
        </div>







                <div class="file" style="    position: relative;
    overflow: hidden;
    margin-top: 10px;">
        <label class="file-label">
        <span class="file-cta">
        <span class="file-icon">
        <i class="fas fa-upload"></i>
        </span>
        <%= form.file_field :images, multiple: true, direct_upload: true, class:" ", placeholder:"Choose files", style:"    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);" %>
        <span class="file-label">
        Choose photos
        </span>

        </span>
        </div>

第一个显示顶部（下图），第二个显示底部。

第一个问题是“选择文件”rails 默认上传按钮在 Bulma 上传按钮内。

第二个的问题是，一旦我上传照片，我就再也看不到已经上传的文件的名称了。

我能做什么？非常感谢任何帮助。

【参考方案1】：

将其包装在一个 div 中，并使 div 位置：相对。 然后你可以男性表单域位置：absolute 然后设置 div 样式而不是表单域