我有一个输入上传一个图像和一个标签，显示在输入顶部。 我在输入顶部添加标签的原因，这样我可以显示我想要的样式，并添加自定义文本。
在输入（如果删除css，display:none；对于#uploadimg)中，有一个字段“name”，该字段不显示选定的文件，当图像上传时，它将显示图像的名称。
但是，当我“display:none”输入时，“name”字段也会消失。 有没有一种方法可以显示“名称”字段？ 我尝试添加label name=“uploadimg”，但似乎不起作用。
当名称字段输入为“显示无”时，是否有方法显示该字段输入？ 如果不是，如何解决这个问题？
null
.upload {
background-color: purple;
padding: 12px 10px;
border-radius: 3px;
color: white !important;
cursor: pointer;
font-size: 16px !important;
text-align: center;
width: 100%;
}
#uploadImg {
display: none;
}<label class="upload" for="uploadImg">Upload Image</label>
<input type="file" name="uploadImg" id="uploadImg" value="test" accept=".jpg,.png">null
您可以添加一些javascript来帮助您完成此任务，添加带有类的span，然后在输入中添加onchange，如下所示
<label class="upload" for="uploadImg">Upload Image</label>
<span class="fileName">No file chosen</span>
<input type="file" name="uploadImg" id="uploadImg" onchange="fileChanged(this)"
value="test" accept=".jpg,.png">
然后添加一些javascript
<script type="text/javascript">
function fileChanged(input) {
let fileName = document.querySelector('.fileName');
fileName.textContent = input.files[0]['name'];
}
</script>
你的CSS不需要改变！
.upload {
background-color: purple;
padding: 12px 10px;
border-radius: 3px;
color: white !important;
cursor: pointer;
font-size: 16px !important;
text-align: center;
width: 100%;
}
#uploadImg {
opacity:0;
}
