如何在文件输入框中添加Font Awesome图标

Question

我有一个文件上传按钮，我想把Font Awesome的上传图标显示在那里，但无论我尝试了什么都没有任何结果。

这是我尝试过的方法：

.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}

<div class="container">
  <span class="select-wrapper">
    <input type="file" name="image_src" id="image_src" />
  </span>
</div>

通过以上代码，我只能得到一张图片而不是浏览按钮，但我希望使用 Font Awesome 图标。

- Aniket Singh

---

@JacobGray 我尝试在输入类型类中添加图标类。 - Aniket Singh

像这样吗？https://dev59.com/8ozda4cB1Zd3GeqPgwFJ#30858367 - Stickers

请确保将其添加到容器中，而不是输入字段本身。 - Stickers

@SagarSingh 你在使用Bootstrap吗？ - Tricky12

@Tricky12 是的，我正在使用Bootstrap。 - Aniket Singh

Answer 1

您可以使用display: none隐藏文件输入框input，并创建自定义按钮或在这种情况下是字体图标来触发输入。此外，您可以使用span来显示输入值，该值将根据输入值的更改而更改。

$("i").click(function () {
  $("input[type='file']").trigger('click');
});

$('input[type="file"]').on('change', function() {
  var val = $(this).val();
  $(this).siblings('span').text(val);
})

.element {
  display: inline-flex;
  align-items: center;
}
i.fa-camera {
  margin: 10px;
  cursor: pointer;
  font-size: 30px;
}
i:hover {
  opacity: 0.6;
}
input {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element">
  <i class="fa fa-camera"></i><span class="name">No file selected</span>
  <input type="file" name="" id="">
</div>

- Nenad Vracar

Answer 2

如果你正在使用Bootstrap - 如果你愿意使用一个小插件，有一个可以做到你想要的。这个插件是Bootstrap Filestyle - http://markusslima.github.io/bootstrap-filestyle/。

你只需要给你的input添加一些属性，并在Bootstrap的JS之后下载/包含插件的JS即可。

<input type="file" class="filestyle" name="image_src" id="image_src" data-input="false" data-iconName="fa fa-upload" data-buttonText="Upload File" />

您的font-awesome图标类将放在中，您的措辞将放在中。

此外，您可以使用添加或删除文本输入部分。如果为true，则显示它; 如果为false（如下面的演示），则隐藏它。 这里有一个有效的演示。

- Tricky12

---

运行良好 - 但请注意，这需要文件样式的版本 >= 1.2。 - milkman

Answer 3

有另一种方法可以只使用CSS和FontAwesome来处理这种情况。如果您去FontAwesome的网站并查看示例，我将在此示例中使用“fa fa-asterisk”，您会注意到一旦单击图标并将其带到页面上，它将为您提供fontawesome图标的UNICODE值。例如，星号的UNICODE值为“f069”。

在这种情况下，您可以在CSS中使用“after或before”伪类，如下所示：

[input]#img_src::before {
font-family: 'FontAwesome';
content: '\f069'
}

这将在任何输入按钮文本之前（在这种情况下）放置一个fontawesome星号。如果您希望按钮仅显示图标，请不要输入任何输入文本，只需使用伪类处理fontawesome图标的分配，仅使用CSS即可。

希望这可以帮助到您。

- ben.kaminski

Answer 4

.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}

<div class="container">
  <span class="select-wrapper">
    <input type="file" name="image_src" id="image_src" />
  </span>
</div>

.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}

<div class="container">
  <span class="select-wrapper">
    <input type="file" name="image_src" id="image_src" />
  </span>
</div>

- syed riyaz

---

有人能告诉我如何使用JS添加更多自定义选择文件图像按钮吗？ - syed riyaz