reactjs如何从表单输入多个文件答案

【问题标题】：reactjs how to input multiple file from formreactjs如何从表单输入多个文件
【发布时间】：2016-05-27 05:18:46
【问题描述】：

我有一个类似的组件：

class Media extends Component {

    render() {
        return (

                    <form className="uploader" encType="multipart/form-data">
                        <input type="file" id="file" />
                    </form>

        )
    }
}

export default Media

这里我要上传多个file。在HTML 我们可以这样做

<input type="file" name="img" multiple>

我怎样才能在reactjs 中有multiple 值？？提前谢谢你

更新

class Media extends React.Component {

    handleChange(e) {
    console.log(e.target.value)
  }

    render() {
        return (

                    <form className="uploader" encType="multipart/form-data">
                        <input type="file" id="file" multiple onChange={this.handleChange.bind(this)}/>
                    </form>

        )
    }
}

ReactDOM.render(
  <Media />,
  document.getElementById('container')
);

如果我上传图片并且值发生了变化，我只会得到第一张图片如何获取所有上传的图片？？

【问题讨论】：

标签： reactjs

【解决方案1】：

你可以在 React 中做同样的事情。你可以找到 attributes 可以使用 here

class Media extends React.Component {
  render() {
    return (
      <form
        className="uploader"
        encType="multipart/form-data"
      >
        <input type="file" id="file" multiple />
      </form>
    )
  }
}  

ReactDOM.render(
  <Media /> ,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>

【讨论】：

【解决方案2】：

multitple 属性之前可能工作过，不幸的是我没有让它在我的 ReactJS (16.8.4) 版本中工作 - 虽然使用属性 webkitdirectory=“true” 工作。

class Media extends React.Component {
  render() {
    return (
      <form
        className="uploader"
        encType="multipart/form-data"
      >
      
      <input 
        type="file" 
        id="file" 
        webkitdirectory="true" 
       />
      
      </form>
    )
  }
}  

ReactDOM.render(
  <Media /> ,
  document.getElementById('container')
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container"></div>

【讨论】：

这会强制您选择一个文件夹。