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>

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

label元素仅适用于一个输入：因为它有一个作为子项（按钮是输入元素），它适用于它而不是你希望的文件输入。

只需删除按钮，也可以将其替换为范围并根据需要设置样式，然后单击标签将打开文件选择器。不需要javascript！：）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 3

我没有看到将按钮作为标签的目的。使用按钮或提交来处理您的输入（文件上传）。你不应该隐藏你的'输入文件'标签。你真的需要为用户提供两件事：'输入文件'标签允许用户选择他想要上传的文件，然后通过提交表格或者ajax调用来执行操作。但是，由于您只是在学习这个过程，我建议您只需执行一个简单的提交，然后在后端编写代码来处理上传文件。以下是我的HTML代码示例：

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

标签不起作用

3 个答案: