从文件 Input 获取文件对象

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

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

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

Answer 2

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

将您的输入元素更改为：

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

那么你可以使用：

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

以此类推

Answer 3

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

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

Answer 4

这对我有用。

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

Answer 5

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

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

最新的版本应该是这样的：

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 事件中获得。

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

Answer 8

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

Answer 9

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

此代码可能有帮助

const _handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = Object(event.currentTarget.files)[0];
console.log(file);
};

从文件 Input 获取文件对象

Get file object from file Input

react-bootstrap