摘要:到目前为止,所谓强壮的的众多上传控件,仍然在使用惯用伎俩,这种不优雅的方式,早该被淘汰了,该是重构的时候了。
如题,搞过文件上传的,肯定会有这种想法,也是初学者经常犯的“误区”
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(); 像我这样经验老道的,一看,不可能,这会受到浏览器安全策略限制...
摘要:,表明执行操作的字符串。,这个属性可以指示系统如何启动一个,以及启动之后如何处理。是一个字符串,例如这里的的构造函数传入了两个参数,和组件名,调用了方法后,会在当前的应用中启动这个服务。 1. 前言 在Android中有四大组件,这些组件中有三个组件与Intent相关,可见Intent在Android整个生态中的地位高度。Intent是信息的载体,用它可以去请求组件做相应...
摘要:在做表单时,在浏览器中测试正常,在移动端测试出现问题。轻击无法唤起软键盘,无法对输入框聚焦,必须长按或重压才可以。经过测试,发现是由于引入移除移动端点击延迟引起的冲突,由于之后修复了移动点击延迟。 **在做表单时,在pc浏览器中测试正常,在ios移动端测试出现问题。轻击input无法唤起软键盘,无法对输入框聚焦,必须长按或重压才可以。经过测试,发现是由于引入fastclick.js(移...
阅读 729·2023-04-25 16:55
阅读 2782·2021-10-11 10:59
阅读 2050·2021-09-09 11:38
阅读 1756·2021-09-03 10:40
阅读 1465·2019-08-30 15:52
阅读 1074·2019-08-30 15:52
阅读 917·2019-08-29 15:33
阅读 3433·2019-08-29 11:26