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

Question

我想隐藏文件输入＆＃34;选择文件＆＃34;按钮，但我想保留文件名。我怎么能这样做？

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

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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;