当前位置: 首页 > Web前端 > HTML

如何主动唤起文件选择框

时间:2023-04-02 20:39:47 HTML

如题,做过文件上传的肯定会有这个想法,也是初学者常犯的“误区”。letinput=document.createElement('input');input.type='file';input.click();像我这样有经验的,乍一看,“不可能,这个会被浏览器安全策略限制”,给力正解让input[type=file]浮动在点击区域上方,老手惯用的招数叫“经验”,但最近的一些事情让我打脸颠覆了认知。如果您不相信我,请在Chrome的控制台代码中尝试以上三行。......允许你在Chrome里面试试是不是很奇怪,因为目前好像只有Chrome能让你这么大胆,让你这么放肆,我们再在Safari里面试试吧。.....好像没什么效果。我们可以认为浏览器限制这些东西只是为了确保它是人为操作,而不是自动操作。在很多类似的情况下,都有类似“当一个人机交互事件发生时”的需求,比如用户点击,键盘敲击。我们可以试试这个Select这种情况很适合那个,"原生input太丑了,我想get一个漂亮的触发上传的按钮”,“我想更优雅地控制上传”还有一种情况是我想在输入框输入某个命令回车触发上传回车触发上传

浏览器兼容性如下/keyup)唤起8,9,10,11yesyesyes可以说是完全兼容。有些版本懒得测试了,不过我觉得IE8还行,其他的就不用测试了。在IE下,input[type=file]需要存在于文档流中。到目前为止,我想你已经体验过,输入漂浮在某处按钮上方这种笨拙的设计可以扔掉了。但这还没有结束。不知道大家有没有想过labelFor的应用场景。如果只是想传递点击事件,我们可以试试下面的解决方案点击uploadorhtml原生支持该方法并以不需要js脚本的方式设计,适用于简单明了的原生表单。到目前为止,许多所谓的“强”上传控件仍然在使用惯用的技巧。这种不优雅的方式早就该淘汰了,该重构了。