Home / Questions / 83704
Accepted
MNibor
Asked: 2020-07-05 09:21:06 +0800 CST 2020-07-05 09:21:06 +0800 CST

使用语义 UI 设计文件上传按钮

  • 772

我在表单上有一个用于上传图片的按钮。但是应用典型代码看起来并不好......

          <div class="ui segment">
        <div class="field">
          <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
          <label for="#elegir">Elige el archivo a subir: </label>
          <input id="elegir" name="uploadedfile" type="file" /><br />
          <input type="submit" class="ui blue inline button" value="Subir archivo" />
        </div>
      </div>

所以它以表格形式加载我

我搜索了语义用户界面文档，但没有找到该项目的实现......

html

1 Answers

  1. Best Answer

    使用输入的样式来上传文件并不容易，因为大多数浏览器不允许您直接设置样式，无论是使用 JavaScript 还是使用 CSS。与大多数 CSS 框架一样，语义 UI 不为所述元素提供特定样式。

    有很多变通方法，我认为它们更像是 CSS 和/或 JavaScript “技巧”来实现这种效果。

    我给你留下了你可以在互联网上找到的众多例子之一：

    input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<label for="file-upload" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i> Subir archivo
</label>
<input id="file-upload" type="file"/>

    另一个例子，更多的“引导程序”：

    .btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<span class="btn btn-primary btn-file">
    Subir archivo <input type="file">
</span>

    Materialize CSS 有一个非常有趣的选项，但可能有点超出问题的范围，就像之前的 Bootstrap 一样：

    http://materializecss.com/forms.html#file

    • 1