自定义按钮触发文件上传—label

我在做自定义按钮触发文件上传的时候，去百度找方法都是：div点击后通过js触发input的文件上传，而不是使用label标签。
原文链接：自定义按钮触发文件上传

自定义按钮触发文件上传

不使用label

不使用label代码：

<div οnclick="upfile()">上传</div>
<input type="file" style="display: none;" id="cs"></input>

<script>
function upfile(){
	document.getElementById('cs').click()
}
</script>

虽然能实现自定义按钮触发文件上传，但很奇怪！
为什么很奇怪？
因为，为什么要写js去触发input的文件上传？html不是提供了更简单的label标签去触发input的文件上传事件吗？

使用label

来看看使用label的写法：

<label>
	<div>上传</div>
	<input type="file" style="display: none;" id="cs"></input>
</label>

这不是十分简洁、简单？

label的使用

定义和用法

<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

通过代码理解

<!-- 第一种写法 -->
<label>
	<div>上传</div>
	<input type="file" style="display: none;"></input>
</label>

<!-- 第二种写法 -->
<label for="cs">
	<div>上传</div>
	<input type="file" style="display: none;" id="cs"></input>
</label>

<!-- 第三种写法 -->
<label for="cscs">
	<div>上传</div>
</label>
<div>其他内容</div>
<div>其他内容</div>
<input type="file" style="display: none;" id="cscs"></input>

1、从方法一、二可以看出，label标签内嵌是可以省略for和id的。
2、从方法二、三可以看出，如果要触发写在label外面的input标签，就需要label通过for的值，去找input的id的值。值一样就触发。

至于用那种方法，当然是看自己的需求，那种方法都比用js去触发强。

深究label的使用

先看看下面这组代码：

<label>
	<div>上传</div>
	<input type="file" style="display: none;" οnclick="console.log(456)"></input>
	<input type="file" style="display: none;" οnclick="console.log(123)"></input>
</label>

<label for="cs">
	<div>上传</div>
	<input type="file" style="display: none;" οnclick="console.log(456)"></input>
	<input type="file" style="display: none;" οnclick="console.log(123)" id="cs"></input>
</label>

通过console的打印可以看出，点击第一个上传打印的是456，点击第二个上传打印的是123。可以知道：
1、label默认触发第一个input的事件。
2、使用for和id可以指定label触发那个input的事件。