javascript - 如何在不涉及实际点击的情况下以编程方式触发输入[type =“file”]？

我试图在用户导航到我网站上的/ uploads路由后立即触发文件上传。上传按钮均正常工作并按预期触发。但是，我似乎无法以编程方式使input[type=file]工作。

我真的希望这是可能的，但我觉得这不是出于安全性或其他原因。 :(

无论如何，我创建了这个演示作为最小的代码示例：

class Hello extends React.Component {
  componentDidMount() {
    console.log('this won\'t trigger')
    this._test.click()

    setTimeout(() => {
      console.log('this also won\'t trigger')
      this._test.click()
    }, 5000);
  }
  clickInput() {
    console.log('this will trigger')
    this._test.click()
  }
  render() {
    return (
      <div>
        <input
          ref={(test) => this._test = test}
          name="test"
          type="file"
          multiple={this.props.multiple}
        />
        <button
          type="button"
          onClick={this.clickInput.bind(this)}
        >
          Trigger upload
        </button>
      </div>
    );
  }
};

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

最佳答案

需要执行用户操作才能从Choose File元素的click或change事件呈现<input type="file">对话框。

关于javascript - 如何在不涉及实际点击的情况下以编程方式触发输入[type =“file”]？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42962024/