Question

如何在文件上传窗口上传文件时停止打开文件？

export default class Upload extends Component {
    constructor(props) {
        super(props);

        this.state = {
            filename: null,
            isLoading: false
        }

    }

    trigger_upload_input = () => {
        document.getElementById("browse-file").click();
    }

    handleOnChange = (e) => {
        if(e.target.files[0]) {
            this.setState({filename: e.target.files[0].name, isLoading: true});
            var that = this;

            setTimeout(function(){
                that.setState({isLoading: false})
            },3000)
        }

    }

    handleInputClicked = (e) => {
        if(this.state.isLoading){
            e.preventDefault();
        }
    }

    render() {
        const { isLoading } = this.state;
        return(
            <div className="upload">
                <div>
                    <input onClick={this.handleInputClicked} onChange={this.handleOnChange} type="file" id="browse-file"/>
                    {this.state.filename && <span>{this.state.filename}</span>}
                </div>
            </div>
        )
    }
}

加载指示器工作但是当我再次尝试点击输入时e.preventDefault（）没有停止打开文件窗口，尝试return false它没有解决问题？

Answer 1

尝试e.stopPropagation()，可能会有所帮助（event.stopPropagation()）。

<强>更新

看起来像一个disabled属性可以添加onChange处理程序。这将阻止对话框打开。加载完成后，可以删除此属性。

Answer 2

您可以 ~~hack~~ 这样的浏览器行为

e.target.disabled = true;
setTimeout(function () { e.target.disabled = false; }, 500);

e.preventDefault（）或返回false无法停止文件输入打开

2 个答案: