javascript - 如何以编程方式触发输入[type ="file"]而不涉及实际点击？

Question

我试图在用户导航到我网站上的/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>

Answer 1

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