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

在click元素的change或<input type="file">事件中呈现geom_crossbar()对话框需要用户操作。

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

1 个答案: