Question

我试图摆脱丑陋的按钮rails作为文件上传的默认设置。我想添加一个glyphicon

  <%= f.file_field :image_url, class:"glyphicon glyphicon-camera" %>

这没有用，我在本页看到的不同帖子中尝试过其他内容，但他们没有附上该文件。

Answer 1

你可以使用css。

<强> HTML：

<div class="image-upload">
   <label for="file-input">
     <span class="glyphicon glyphicon-camera"></span>
   </label>

   <%= f.file_field :image_url, id:"file-input" %>
</div>

<强> CSS：

.image-upload > input
{
   display: none;
}
.image-upload > label{
  cursor:pointer;
}

您可以找到工作示例here

Answer 2

根据Bootstrap Filestyle的建议，您可以使用Bootstrap的Filestyle来设置文件上传按钮的样式。

第1步：将其添加到您的布局application.html.erb

我已经从CDN添加了Bootstrap Filestyle库。你应该确保你已经加载了JQuery和Boostrap。

<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.filestyle/1.1.0/js/bootstrap-filestyle.min.js"> </script>

第2步：将其添加到相应的js文件中：

$(":file").filestyle({input: false});

第3步：然后您的image_url文件字段如下所示：

<%= f.file_field :image_url,class: "filestyle", "data-input" => false %>

Answer 3

您也可以使用： -

   add file field and hide this field :-
     <%= f.file_field :image_url ,:onchange=>"loadFile(event)",id: "upload-it", class: "hide_input"%>

add one div with class:"glyphicon glyphicon-camera" :-
 <div class="glyphicon glyphicon-camera" id="image-output",:onclick="upload_it(event)"></div>

use script:-
<script>
  var loadFile = function(event) {
    var output = document.getElementById('image-output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
  function upload_it(){
    $("#upload-it").click();
  };
</script>

在rails上自定义file_field按钮ruby

3 个答案: