Javascript 当css应用于输入[type=file]时获取文件名

我正试图通过

输入

获取文件。 我通过CSS隐藏输入，并给标签一个样式。这里有个问题

如果输入是隐藏的，则默认的输入按钮不能支持支持的get文件名。 我想Vanila JS可以解决这个问题，但我不知道该怎么办。 我试图获取文件的值并将其放入指定为内部HTML的框中，但没有成功

。提交{
宽度：140px；
高度：40px；
背景色：红色；
颜色：#fff；
文本对齐：居中；
填充：10px；
线高：40px；
光标：指针；
}

提交
文件名

接下来，您可以获取文件名，并使用

innerHTML

将其显示给用户

document.getElementById（'test'）.addEventListener（“更改”，函数（）{
var fullPath=document.getElementById（'test'）。值；
如果（完整路径）{
var startIndex=（fullPath.indexOf（'\\'）>=0？fullPath.lastIndexOf（'\\'）：fullPath.lastIndexOf（'/'）；
var filename=fullPath.substring（startIndex）；
if（filename.indexOf（'\\'）==0 | | filename.indexOf（'/'）==0）{
filename=filename.substring（1）；
}
document.getElementById（“test2”）.innerHTML=filename；；
}
});
。提交{
宽度：140px；
高度：40px；
背景色：红色；
颜色：#fff；
文本对齐：居中；
填充：10px；
线高：40px；
光标：指针；
}

提交
文件名
您的HTML

<input type="file" id="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span id="test2">filename</span>
</label>

和Javascript

let file = document.querySelector('#test');
let test2 = document.querySelector('#test2');

file.addEventListener('change', function(e){
  test2.innerHTML = e.target.files[0].name;
});

这里演示
这是否回答了您的问题？获取值。我试着通过innerHTML来实现它，但没有成功。这将对您有所帮助。
let file = document.querySelector('#test');
let test2 = document.querySelector('#test2');

file.addEventListener('change', function(e){
  test2.innerHTML = e.target.files[0].name;
});