如何主动唤起文件选择框

yuanzhanghu 发布于2019-08-02 10:03 / 2886人阅读

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

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

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脚本，适用于简单朴素的原生表单。

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

GPU云服务器云服务器文件选择框 asp asp 选择文件框 js文件选择框插件 asp弹出文件选择框

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

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

如何主动唤起文件选择框

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

hosition 2019-08-22 15:52 评论0 收藏0
Intent以及IntentFilter详解

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

mrcode 2019-08-16 10:49 评论0 收藏0
表单在ios下输入框必须重压或长按才能唤起软键盘

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

tainzhi 2019-08-26 10:46 评论0 收藏0