Question

我修改了输入[type = file]并可以将其转到带绿色背景的按钮。使用的代码如下：

<style>
    #file {
        height:0px;
        opacity:0;
    }  
    #span {
        left:0px;
        position:absolute;
        cursor: pointer;
    }
</style>

<form name="form">
    <input type="file" id="file" name="file"/>
    <span id="span" style="background-color: #7FFFD4">Select a file</span>

</form>

<script>
    var span = document.getElementById("span");

    span.onclick = function(event) {
        document.form.file.click(event);
    };

</script>

现在我无法查看所选文件。有什么办法可以查看我在按钮旁边选择的文件吗？

提前致谢

Answer 1

您无法看到文件名，因为您已将输入元素的高度及其不透明度设置为零。你可以将不透明度设置为1，并重新定位跨度以覆盖“选择文件”按钮，例如像这样的东西（适用于我的铬）：

 #file {
      opacity: 1;
 }
 #span {
      left: 3px;
      position: absolute;
      cursor: pointer;
      padding: 10px;
      top: 3px;
 }

您也可以查看this

Answer 2

如果要将输入类型文件保持为隐藏状态，并希望将其文件名显示为span。你可以做类似下面的事情。

<input type="file" id="file" name="file" onchange="ChangeText(this, 'span');"/>
    <span id="span" style="background-color: #7FFFD4">Select a file</span>

function ChangeText(oFileInput, sTargetID) {

    document.getElementById(sTargetID).value = oFileInput.value;
}

无法显示所选文件的名称

2 个答案: