如何使用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>

Answer 2

图像将使用DXImageTransform过滤器CSS属性和HTML5 FileReader API直接从HTML输入FileUpload显示。

Please check this https://jsfiddle.net/jaanhaitojahanhai/7zadcqy7