html - 如何使用 Font Awesome 图标设置文件上传输入的样式，然后以特定样式显示文件名？

Question

我有这个代码:

<div class="clip-upload">
 <label for="file-input">
  <i class="fa fa-paperclip fa-lg" aria-hidden="true"></i>
 </label>
 <input type="file" name="file-input" id="file-input">
</div>

使用 CSS:

.clip-upload > input
{
    display: none;
}

因此它只是显示为上传文件按钮的回形针图标。

我有两个问题:

1. 如何使上传文件的名称与常规上传输入一样显示？注意:我不希望它替换回形针图标，我希望使用 CSS 将文件名定位在页面上(就像在新行中，见下图)。

2. 如何设置此文件名的样式，使其具有背景颜色和边框半径，如下所示:

Answer 1

你可能必须使用一个 lil jQuery(也可以在 vanilla JS 中完成)来使用另一个元素来包含文件名

• 隐藏你的输入
• 使用回形针作为按钮
• 关于改变你可以抓取输入文件名的值并将其添加到新的创建的元素。

注意:附加的名称实际上不会以这种方式提交，我会把它留给你。

$(document).ready(function() {
  $('.file-input').change(function() {
    $file = $(this).val();
    $file = $file.replace(/.*[\/\\]/, ''); //grab only the file name not the path
    $('.filename-container').append("<span  class='filename'>" + $file + "</span>").show();
  })

})

.rounded {
  height: 30px;
  border-radius: 4px;
  padding: 4px;
}

.in1 {
  width: 120px;
}

.in2 {
  width: 350px;
}

i {
  margin: 0 8px;
}

.filename-container {
  margin: 20px 20px 0 0;
}

.filename {
  display: inline-block;
  padding: 0 10px;
  margin-right: 10px;
  background-color: #ccc;
  border: 1px solid black;
  border-radius: 15px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  font-family: 'verdana', sans-serif;
}

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="clip-upload">
  <input class="rounded in1" value="other input" /> <input class="rounded in2" value="other input larger" />
  <label for="file-input">
  <i class="fa fa-paperclip fa-lg" aria-hidden="true"></i>
 </label> <i class="fa fa-play fa-lg"></i>
  <input type="file" class="file-input hide" name="file-input" id="file-input">
  <div class="filename-container hide"></div>

</div>