Rails 如何调整默认上传按钮的样式 (已解决)

levan · 2013年08月14日 · 最后由 runup 回复于 2018年02月11日 · 6699 次阅读

下面是三个按钮的代码，我需要的样式是第一个那样的，然后默认的样式是第二个，我尝试加入一样的 class，结果变成了第三个那样。请问这该如何解决？那个默认的“选择文件”，没法去掉吗？

<a class="btn btn-info btn-block btn-large" href="#" title=""><i class="fa-icon-cloud-upload"></i>&nbsp;上传头像</a>

<%= f.file_field :avatar %>

<%= f.file_field :avatar, class:"btn btn-info btn-block btn-large" %>

levan #1 2013年08月14日

<div id="uploadavatar">
    <div class="defaultupload">
        <%= f.file_field :avatar %>
    </div>
    <button class="btn btn-info btn-block btn-large" href="#" title=""><i class="fa-icon-cloud-upload"></i>&nbsp;上传头像</button>
</div>

#uploadavatar {
    position: relative;
}

#uploadavatar .defaultupload {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    z-index: 2;
}

#uploadavatar .defaultupload:hover {
    opacity: 0;
}

#uploadavatar button {
    position: relative;
    top: 0;
    z-index: 1;
}

.defaultupload select, input[type="file"] {
height: 45px;
line-height: 30px;
}

参考：http://stackoverflow.com/questions/7037154/customising-the-look-of-f-file-field-in-rails 试例：http://jsfiddle.net/JgDuh/ 通过 css 把框重叠，通过 z-index 参数确认分层，把默认的样式放前面，并隐藏。缺点：原来按钮的 css“点击下压”的动画样式没了。。。

1 个赞

martin91 #2 2013年08月14日

我是直接隐藏掉了原有的按钮，然后自己画一个按钮，通过处理自己画的按钮的点击事件，去触发隐藏了的按钮的点击事件。

huacnlee #3 2013年08月14日

放个自定义图片；
隐藏 upload 那个 input
点击自定义图片的时候，用 JS 调用 upload input 的 click 事件

Ruby China 的上传功能就是这么设计的

2 个赞

ghjcumt2008 #4 2013年08月14日

偷梁换柱之法

levan #5 2013年08月14日

@Martin91 @huacnlee @ghjcumt2008 感谢～

tdseed #6 2013年08月22日

这种方法在 ie 下别的都好，当你保存的时候，结果就获取不到图片了，问题在 js 的 clilk 事件上（ie 安全性的考虑？），直接用 input 做的话，就需要调节大小，很麻烦，兼容性可以，但点击的范围个浏览器会有差别，支个招吧？！

shatle #7 2013年08月22日

@tdseed ，IE8 确实有问题

runup #8 2018年02月08日

对

martin91 回复

按照这个思路，我这边通过函数触发了图片上传的动作，但是文件并没有上传，是否还需要其他操作？@huacnlee

martin91 #9 2018年02月08日

@runup 你是怎么提交的？有没有发出网络请求？

runup #10 2018年02月08日

对

martin91 回复

已经解决了，成功的代码和失败的代码分别如下：

#success
<script>
    $(document).ready(function(){
      var fileSelect = document.getElementById("button_trigger"),
          fileElem = document.getElementById("portrait_avatar");

      fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
          fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
      }, false);
    });
  </script>

#error
<script>
  $(document).ready(function(){
    $("#button_trigger").click(function(){
      $("#portrait_avatar").trigger("click");
    });
  });
</script>