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>

Answer 2

在这个地方添加一个新组件：

 <span id='upload-file-name'></span>

使用 JavaScript，先获取文件名

var em = document.getElementById("upload-input");
var fname = em.name;

隐藏文件上传输入框

em.style.display = 'none';

把文件名放到这个新组件中

document.getElementById("upload-file-name").innerHTML = fname;