资讯专栏INFORMATION COLUMN

如何主动唤起文件选择框

yuanzhanghu / 2851人阅读

摘要:到目前为止,所谓强壮的的众多上传控件,仍然在使用惯用伎俩,这种不优雅的方式,早该被淘汰了,该是重构的时候了。

如题,搞过文件上传的,肯定会有这种想法,也是初学者经常犯的“误区”

let input = document.createElement("input");
input.type = "file";
input.click();

像我这样经验老道的,一看,“不可能,这会受到浏览器安全策略限制”,牛逼哄哄的祭出正解

input[type=file] 飘在点击区上方,老手的惯用伎俩,这就叫“经验”,但最近一些事,让我啪啪打脸,颠覆了我的认知,不信你试试在 Chrome 的 Console 中试一下上面的三行代码。

。。。。。。

是不是很意外,让你在 Chrome 中试,是因为目前好像只有 Chrome 能这么大胆的放开,让你这么放肆,我们再尝试在 Safari 下试一下

。。。。。。

好像没效果,我们可联想到,浏览器限制这些东西,无非是想确定是人为操作,而非自动运行,在很多类似的情形,都有类似要求“人机交互事件发生时”,比如用户点击、键盘敲击。我们可以这么尝试一下




这种情况很适合那种,“原生的input的太丑,我想弄个漂亮的按钮触发上传”、“我想更优雅的控制上传”

还有一种情况我想在输入域中输入某个命令,回车触发上传


敲击回车触发上传

浏览器兼容性如下

Ability IE Firefox(41) Safari(11) Chrome(65)
直接唤起 no no no yes
事件沙盒(click/keyup)唤起 8,9,10,11 yes yes yes

可以说是全兼容

有些版本我懒得测了,但我想连IE8都行,其它的不用测了吧  
IE 下,input[type=file] 需要存在文档流中

至此,我想你之前经历过的,input 飘在某个按钮上方这种别扭设计可以扔掉了。

但是还没完,不知道大家有没有想到 labelFor 的应用场景,如果只是想点击事件转移,我们可以尝试以下方案


或者

这种方式,属于html原生支持的、设计如此的,不需要一句js脚本,适用于简单朴素的原生表单。

到目前为止,所谓"强壮的"的众多上传控件,仍然在使用惯用伎俩,这种不优雅的方式,早该被淘汰了,该是重构的时候了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52097.html

相关文章

  • 如何主动唤起文件选择

    摘要:到目前为止,所谓强壮的的众多上传控件,仍然在使用惯用伎俩,这种不优雅的方式,早该被淘汰了,该是重构的时候了。 如题,搞过文件上传的,肯定会有这种想法,也是初学者经常犯的误区 let input = document.createElement(input); input.type = file; input.click(); 像我这样经验老道的,一看,不可能,这会受到浏览器安全策略限制...

    hosition 评论0 收藏0
  • Intent以及IntentFilter详解

    摘要:,表明执行操作的字符串。,这个属性可以指示系统如何启动一个,以及启动之后如何处理。是一个字符串,例如这里的的构造函数传入了两个参数,和组件名,调用了方法后,会在当前的应用中启动这个服务。 1. 前言        在Android中有四大组件,这些组件中有三个组件与Intent相关,可见Intent在Android整个生态中的地位高度。Intent是信息的载体,用它可以去请求组件做相应...

    mrcode 评论0 收藏0
  • 表单在ios下输入必须重压或长按才能唤起软键盘

    摘要:在做表单时,在浏览器中测试正常,在移动端测试出现问题。轻击无法唤起软键盘,无法对输入框聚焦,必须长按或重压才可以。经过测试,发现是由于引入移除移动端点击延迟引起的冲突,由于之后修复了移动点击延迟。 **在做表单时,在pc浏览器中测试正常,在ios移动端测试出现问题。轻击input无法唤起软键盘,无法对输入框聚焦,必须长按或重压才可以。经过测试,发现是由于引入fastclick.js(移...

    tainzhi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<