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

Question

我正在尝试使用带有jquery的React-Bootstrap文件输入fileupload()。如果是纯粹的jQuery，我会使用$('#fileUpload').prop('files')来获取要传递给fileupload调用的文件。然而，我不知道如何在React-Bootstrap中正确获取文件。

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

- Joe W

---

@Daniel，我使用了下面的答案。你遇到了什么问题？ - Joe W

看起来对我不起作用： http://jsfiddle.net/danyaljj/b1fhnb6q/2/ - Daniel

@Daniel，你不能在React类“Hello”之外访问this.refs。你的错误“Uncaught TypeError: Cannot read property 'fileUpload' of undefined”表示this.refs未定义，而不是fileUpload。你需要将引用放在类内的函数中，例如：http://jsfiddle.net/0ttmh4hs/。 - Joe W

@Daneil 不用担心，React的学习曲线可能会让人感到沮丧。如果你是那个点了踩的人，能否取消你的踩，这样大家就知道这是正确的答案了。 - Joe W

它说“除非被编辑，否则您无法点赞”。您能编辑一些内容吗？ - Daniel

Answer 1

更流行的版本可能是这样的：

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" />
  )
}

你可以从onChange事件中获取e.target.files，该属性存在其中。

编辑：在评论中感谢马克的提醒已移除不必要的引用代码。

- Dana Woodman

---

useRef钩子不是必需的，只需要onChange处理程序就足够了。 - remjx

谢谢@MarkJackson，我已经更新了代码以反映这个改进。 - Dana Woodman

Answer 2

ref字符串属性被视为过时，将来很可能会被弃用。现在的方法是使用回调引用。下面我将演示如何使用ES6箭头函数。

将您的输入元素更改为：

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

然后您可以使用：

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

等等。

- fahad

---

针对FormControl元素，考虑到Input已经被弃用，你有任何实现的想法吗？ - Nift

由于 React 15 的新更改，这应该是被接受的答案 :) - Sticky

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>

- Ogglas

Answer 4

很简单，我完全错过了这一点：

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

- Joe W

---

你能分享一下你在哪里找到这个答案吗？我也在使用React-Bootstrap构建我的应用程序，但是很难找到教如何使用React-Bootstrap与数据交互的资源。 - tet

@T.O 我想我自己解决了。对于我大部分的React问题，我只是将html、jquery等知识和关于React和bootstrap的基本信息拼凑在一起，这些信息可以在它们的网站和SO上找到。 - Joe W

哦，我明白了。谢谢你的回复。 - tet

Answer 5

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

- Richard

Answer 6

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

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

- Dave Martinez

Answer 7

这对我起作用了。

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

- mkkaushik

Answer 8

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

- KDSG

Answer 9

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

这段代码可能会有所帮助。

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

- bilaltehseen