Question

我遇到了一个奇怪的问题。不确定是否由于任何其他原因的安全问题。我有以下代码：

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button onclick='someThgTemp()'>TRY</button><br /><br /><br /><br />
<label id='labelId' for='some'>sdfasdf</label>
<input id='some' type='file'/>
</body>
<script>
var someThg = function someThg(){
alert(2);
console.log(document.getElementById('labelId'));
  document.getElementById('labelId').click();
}

function someThgTemp(someThg){
alert('1');
var that = this;
  window.setTimeout(function(){

  that.someThg();
 }, 3000)

alert(3)

}
</script>
</html>

所以在这一行：

<button onclick='someThgTemp()'>TRY</button>

文件选择器对话框未显示

如果我将上述行更改为以下

<button onclick='someThg()'>TRY</button>

调用文件选择器。请让我知道我做错了什么以及它的替代方案。

这样做的原因是，在显示文件浏览器之前我需要验证一些东西。如果经过验证，那么我只想显示用户文件浏览器。

Answer 1

出于安全原因，您无法手动触发打开弹出窗口的单击事件或在异步调用中打开对话框文件且延迟太长（3秒后setTimeout使用）。用户必须将点击直接关联到您希望发生的事件。

尝试设置1000毫秒而不是3000.（并删除所有警报）

Answer 2

我猜你正在弄乱this和that。我会以这种方式继续前进：

＆＃13;

window.onload = function () {
  theBtn = document.getElementById("myBtn");
  theBtn.onclick = function () {
    theFile = document.getElementById("some");
    theFile.click();
  };
};

＆＃13;

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="myBtn">TRY</button>
<br />
<br />
<br />
<br />
<label id='labelId' for='some'>sdfasdf</label>
<input id='some' type='file' />

＆＃13;

使用计时器 - 浏览窗口在一秒钟之后出现。

＆＃13;

window.onload = function () {
  theBtn = document.getElementById("myBtn");
  theTimeFunc = function () {
    theFile = document.getElementById("some");
    theFile.click();
  };
  theBtn.onclick = function () {
    setTimeout(theTimeFunc, 1000);
  };
};

＆＃13;

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<button id="myBtn">TRY</button>
<br />
<br />
<br />
<br />
<label id='labelId' for='some'>sdfasdf</label>
<input id='some' type='file' />

＆＃13;

输入类型=从匿名函数调用时未触发的文件单击

2 个答案: