用 CSS 和一点 JS 来设计输入类型文件，这样可以吗？

Question

我想要做的是添加一个用于上传文件的按钮，我可以设置样式并显示所选文件的名称。

我已经搜索了很多，我搜索的越多，我发现的不同解决方案就越多。我发现，你不能直接设置输入的样式，因为你不能...... :(。

最后，我从每个解决方案中挑选了一点，并得出以下结论：

我在标签中为 input[type file] 设置了一个 span，并通过 display:none; 隐藏了输入。

现在我可以根据我的需要设置跨度的样式，并在单击时调用输入。在最后的小 JS 中，获取输入的值（所选文件的名称是什么）并将其显示在样式按钮上的跨文本中。

但看看你自己：

#input-file {
    display: none;
    }

.upload-btn {

    display: block;
    text-align: center;
    margin: 20px auto 20px;
    width: 50%;
    height: 30px;
    background-color: #fcff7f;
    line-height: 30px;

    }

.upload-btn:hover {
    background-color: #c39d5a;
    color: white;
    cursor: pointer;
    }

<label class="upload-btn">
  <input type="file" id="input-file" onchange="changeText()" />
  <span id="selectedFileName">Browse</span>
</label>


<script type="text/javascript">
  function changeText() {
    var y = document.getElementById("input-file").value;
    document.getElementById("selectedFileName").innerHTML = y;
  }
</script>

我想知道的是，这有什么问题？就我而言，它非常简单，简单到我“还”不明白为什么我在互联网上找到的所有解决方案都更加困难。他们总是尝试使用虚假输入，不透明等等。

所以请非常有经验的人告诉我是否可以像这样使用它，或者我必须改变它吗？要什么？

谢谢;) 以及很多英语不好的借口。