【问题标题】:Triggering File Input Field w/out User Action on ANY DOM elements [duplicate]在任何 DOM 元素上触发没有用户操作的文件输入字段 [重复]
【发布时间】:2018-08-04 21:04:02
【问题描述】:

这个问题和Programmatically trigger “select file” dialog box根本不同,因为后者涉及到User 对 DOM 元素的操作。这里的问题是如何触发输入 无需用户操作的文件...

所以当我在处理我的 AngularJS 项目时,我注意到文件输入字段的一个特殊性......我将它的可见性隐藏在我的页面上,并且通常使用 JQuery 触发器函数($("#random" ).trigger('click')) 当用户点击其他 DOM 元素时。

现在,当我想在从服务器检索一些数据后在页面加载时自动打开它时,有一个特殊的实例。当页面只考虑到这个目的时,为了用户的利益,更多的是作为快捷方式。所以在收到回调结果后,我用同样的JQuery触发函数来触发它。但它不起作用。

所以.. 我认为只能通过编程/手动单击另一个 DOM 元素来触发文件输入,而不是通过完全可编程的方式?

这是某种浏览器安全限制还是有人有解决方法?我已经尝试了一切,包括超时......

并不是说我真的需要这个功能,实际上如果没有它,它的“垃圾邮件”会更少,而更多的是对此事的专业好奇心。

干杯。

M

【问题讨论】:

  • 这在大多数浏览器中是不可能的。简而言之,浏览器会跟踪您当前运行的线程是否由用户操作启动,以及该事件是否受信任。基于它,它允许或禁止某些方法。打开输入文件对话框必须由用户操作触发(大多数浏览器接受对隐藏文件输入的编程点击,如果它们是由不同表单元素上的 onclick 事件触发的,并且该事件的isTrustedtrue
  • 谢谢@AndreiGheorghiu,我怀疑是这种情况!干杯
  • @georgeawg,我提名这个问题重新开放。被标记为 重复的那个不回答这里提出的问题。它没有明确说明在没有用户交互的情况下无法打开文件选择输入,这就是这个问题的要求和应得的答案。
  • @georgeawg 首先,您将问题标记为重复。它不是重复的。另一个问题是如何从隐藏元素打开文件输入。这是如何在没有用户交互的情况下打开一个。如果你真的认为它们是同一个问题,也许你应该避免滥用你的 AngularJS 标签(在这里错误地应用,因为 AngularJS 不会影响这一点)来结束关于 HTML 和浏览器标准处理 JavaScript 事件的问题。
  • 对相关问题的未接受答案似乎比它自己的问题更适合这个问题仍然不会使这个问题与另一个问题重复。您至少可以指出您提到的答案(通过链接),恕我直言,您应该在关闭问题时这样做,而不是在被提名重新打开问题之后。

标签: javascript jquery


【解决方案1】:

当单击另一个美观的按钮时,文件输入通常会被隐藏并使用 Javascript 进行单击。上传文件对话框只能通过用户交互打开,例如单击另一个 DOM 元素。因此,在页面加载时单击文件输入没有任何作用。 Internet Explorer 据说支持在页面加载时打开上传文件对话框,但其他浏览器不支持。

<input type="file" style="display: none;">
<button onClick="showUploadDialog()">Upload File</button>
<script>
function showUploadDialog(){
  document.querySelector("input[type=file]").click();
}
</script>

【讨论】:

  • 谢谢,但这并不能回答问题。争论从来都不是关于触发输入文件的方法,涉及到用户操作。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-12-05
  • 2013-05-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多