javascript - 使用 Reactjs 显示自定义输入文件的文件名

Question

我有一个文件的自定义输入，但是选择的文件没有显示，我不知道如何显示它。

我的代码

              <input
                type="file"
                name="file"
                id="file-upload"
                onChange={this.handleselectedFile}
                style={{ display: "none" }}
              />
              <label className={classes.uploadButton} htmlFor="file-upload">
                <Button
                  variant="contained"
                  color="primary"
                  component="span"
                  endIcon={<GetAppIcon />}
                >
                  Importer STL*
                </Button>
              </label>

handleselectedFile 函数:

  handleselectedFile = event => {
    this.setState({
      selectedFile: event.target.files[0]
    });
  };

如果可能，我想在上传按钮之后显示选择的文件，而不使用 CSS 文件。我想我可以只使用 javascript/react 来完成，但我不知道怎么做。

---

编辑多个文件

处理选定文件函数:

  handleselectedFile = event => {
    this.setState({
      selectedFile: event.target.files,
      selectedFileName: event.target.files.name
    });
  };

选中的文件按钮

              <input
                type="file"
                name="file"
                id="file-upload"
                onChange={this.handleselectedFile}
                style={{ display: "none" }}
                multiple
              />
              <label className={classes.uploadButton} htmlFor="file-upload">
                <Button
                  variant="contained"
                  color="primary"
                  component="span"
                  endIcon={<GetAppIcon />}
                >
                  Importer STL*
                </Button>
              </label>
              <span className={classes.selectedFileName}>
                {this.state.selectedFileName}
              </span>

如何显示文件名或显示选择为原始输入的文件数？

Answer 1

您可以像这样在 handleselectedFile 事件中保存文件名:

handleselectedFile = event => {
    this.setState({
        selectedFile: event.target.files[0]
        //**** added line below ****//
        selectedFileName: event.target.files[0].name
    });
};

然后像这样在你的 JSX 中使用它:

<input
    type="file"
    name="file"
    id="file-upload"
    onChange={this.handleselectedFile}
    style={{ display: "none" }}
/>
<label className={classes.uploadButton} htmlFor="file-upload">
    <Button
        variant="contained"
        color="primary"
        component="span"
        endIcon={<GetAppIcon />}
    >Importer STL*
    </Button>
</label>

//**** added line below ****//
<p>{this.state.selectedFileName}</p>