标签不起作用

Question

我有这样的代码：

.hidden_element { 
 
    height: 1px; 
 
    width: 1px; 
 
    overflow: hidden; 
 
}

<form action=""> 
 
    <label for="file"> 
 
    <button type="button" class="button red">Choose File</button> 
 
    </label> 
 
    <div class="hidden_element"> 
 
    <input type="file" name="video" id="file" /> 
 
    </div> 
 
</form>

问题是，当我点击选择文件没有任何反应。

Answer 1

更改按钮像<button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>

.hidden_element { 
 
    height: 1px; 
 
    width: 1px; 
 
    overflow: hidden; 
 
}

<form action=""> 
 
    <label for="file"> 
 
    <button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button> 
 
    </label> 
 
    <div class="hidden_element"> 
 
    <input type="file" name="video" id="file" /> 
 
    </div> 
 
</form>

Answer 2

标签元素仅适用于一个输入：由于其具有一个作为一个孩子（按钮是输入元素），它适用于而不是像你所希望的那样输入文件。

只要删除按钮，也许用一个跨度替换它，然后按照你的意愿设置它，然后单击标签将打开文件选取器。没有JavaScript需要！ :)

.hidden_element { 
 
    height: 1px; 
 
    width: 1px; 
 
    overflow: hidden; 
 
} 
 
.button { 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
    border: 1px solid #aaa; 
 
    background-image: linear-gradient(to bottom, #eee, #ccc); 
 
    padding: 0.1em 0.2em; 
 
    cursor: pointer; 
 
}

<form action=""> 
 
    <label for="file"> 
 
    <span class="button red">Choose File</span> 
 
    </label> 
 
    <div class="hidden_element"> 
 
    <input type="file" name="video" id="file" /> 
 
    </div> 
 
</form>

Answer 3

我不认为把按钮作为标签的目的。使用按钮或提交来处理您的输入（文件上传）。你不应该隐藏你的'输入文件'标签。你真的需要两件事情给用户：'输入文件'标签，允许用户选择他想上传的文件，然后通过提交表单或者ajax调用来执行一个动作。但是，由于您刚学习这个过程，因此我建议您仅执行一个简单的提交操作，并将代码写入后端，以处理上传文件。这里是我的html代码示例：

<form method="post" action="uploadFile.php"> 
 
\t <input type="file" name="video" id="file" /> 
 
\t <br /><br /> 
 
\t <input type="submit" value="upload file"> 
 
</form>