我在做自定义按钮触发文件上传的时候,去百度找方法都是: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的事件。