CSS：如何隐藏文件输入但保留文件名？

Question

我想隐藏文件输入“选择文件”按钮，但我想保留文件名。我怎样才能做到这一点？

<input
  name="upload"
  id="upload-input"
  placeholder="Select a file"
  ref="fileInput"
  type="file"
  required>

Answer 1

您可以将文件名保存到另一个 html 元素，然后像这样隐藏选择文件输入。

function getFileName()
{
var x = document.getElementById('upload-input')
x.style.visibility = 'collapse'
document.getElementById('fileName').innerHTML = x.value.split('\\').pop()
}

<input
  name="upload"
  id="upload-input"
  placeholder="Select a file"
  ref="fileInput"
  type="file"
  required 
  onchange="getFileName()"><span id="fileName"></span>