Question

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

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

Answer 1

ref string属性为considered legacy，很可能在将来的某个时候被弃用。现在这样做的方法是使用回调参考。下面我演示使用ES6箭头功能。

将输入元素更改为：

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

然后你可以使用：

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

等等。

Answer 2

它很直接;我完全错过了这个：

var files = this.refs.fileUpload.getInputDOMNode().files;

Answer 3

我使用自定义按钮解决了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>

Answer 4

使用Hooks（和Typescript）更新的版本类似于：

function MyComponent(): JSX.Element {
  const fileField = React.useRef<HTMLInputElement>(null)

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

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

可以在e.target.files事件中获得的onChange上找到该属性。

Answer 5

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

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

Answer 6

这对我有用。

let file = this.refs.fileUpload.files[0];

Answer 7

您可以通过将事件处理程序绑定到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;

Answer 8

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

从文件输入中获取文件对象

8 个答案: