24

我正在尝试使用带有 jquery 的 react-bootstrap 文件输入fileupload()。使用直接的 jquery，我会做$('#fileUpload').prop('files')让文件传递给 fileupload 调用。但是，我不知道如何使用 react-bootstrap 正确获取文件。

<Input type='file' label='Upload' accept='.txt' ref='fileUpload' buttonAfter={uploadFileButton}/>
4

9 回答 9

27

ref 字符串属性被认为是 legacy，并且很可能在将来的某个时候被弃用。现在执行此操作的方法是使用回调 ref。下面我演示使用 ES6 箭头函数。

将您的输入元素更改为：

<Input 
  type='file' label='Upload' accept='.txt' 
  buttonAfter={uploadFileButton} 
  ref={(ref) => this.fileUpload = ref}
/>

然后你可以使用：

const file = this.fileUpload.files[0];

等等。

于 2016-09-29T19:02:16.793 回答
15

更新的版本是这样的：

function MyComponent(): JSX.Element {
  const handleFileSelected = (e: React.ChangeEvent<HTMLInputElement>): void => {
    const files = Array.from(e.target.files)
    console.log("files:", files)
  }

  return (
    <input onChange={handleFileSelected} type="file" />
  )
}

e.target.files找到可以从onChange事件中获取的属性。

编辑：删除了不必要的参考代码，帽子提示标记在评论

于 2020-07-20T16:36:11.563 回答
10

这很简单。我完全错过了这个：

var files = this.refs.fileUpload.getInputDOMNode().files;
于 2015-05-27T13:57:40.320 回答
10

我React-Bootstrap使用自定义外观按钮解决了这样的文件上传问题：

addFile = (event: any): void => {
    console.log(event.target.files[0]);
}

<FormGroup>
    <ControlLabel htmlFor="fileUpload" style={{ cursor: "pointer" }}><h3><Label bsStyle="success">Add file</Label></h3>
        <FormControl
            id="fileUpload"
            type="file"
            accept=".pdf"
            onChange={this.addFile}
            style={{ display: "none" }}
        />
    </ControlLabel>
</FormGroup>
于 2018-01-14T02:15:16.193 回答
2

您可以通过将事件处理程序绑定到 HTML 文件输入的 onChange 事件来访问文件对象。

这是一个使用功能组件的快速示例：

import React from 'react'

function UploadForm(props) {
  return(
    <div>
      <input type="file" name="docx" onChange={setFile.bind(this)} />
      <input type="button" onClick={postFile} value="Upload" />
    </div>
  )
  function postFile(event) {   
    // HTTP POST  
  }
  function setFile(event) {
    // Get the details of the files
    console.log(event.target.files)
  }
}

export default UploadForm;
于 2019-06-03T15:10:47.880 回答
1

这对我有用。

let file = this.refs.fileUpload.files[0];
于 2017-03-15T07:20:40.687 回答
1

添加到fahad 的答案中，如果您不能使用箭头函数（由于旧的浏览器支持或其他原因），您必须将 React 上下文绑定到该函数。

<Input type='file' label='Upload' accept='.txt'
  buttonAfter={uploadFileButton}
  ref={ function(ref) { this.fileUpload = ref }.bind(this) }
/>
于 2016-10-17T22:12:20.807 回答
0

我正在使用 react bootstrap 并发现 files 是一个 javaScript 对象而不是数组类型，所以我们必须像键值一样访问它，其中键是索引，即长度 - 1

此代码可能会有所帮助

const _handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = Object(event.currentTarget.files)[0];
console.log(file);
};
于 2021-11-02T14:15:26.517 回答
0

如果要访问使用 ref 上传的文件，则可以按以下方式进行： fileUpload.current.files[0]

于 2021-01-21T17:00:47.033 回答