Question

我有一个类似的组件：

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>

我如何在multiple中拥有reactjs值？提前谢谢

更新

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')
);

如果我上传图片并且值已更改，我只会获得第一张图片如何获取所有上传的图片？

Answer 1

你可以在React中做同样的事情。你可以找到attributes你可以使用的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>

#include <vector>
#include <iostream>
#include <algorithm>

class IFruit
{
public:
    virtual ~IFruit(){};
};
class Apple : public IFruit {};
class Banana : public IFruit {};
class Orange : public IFruit {};

class FruitBowl
{
public:
    template <typename T>
    bool HasFruit()
    {
        return std::any_of(m_Fruit.begin(), m_Fruit.end(),
                          [](IFruit* fruit) {
                              return dynamic_cast<T*>(fruit) != nullptr;
                          });
    }

    std::vector< IFruit* > m_Fruit;
};


int main()
{
    FruitBowl Snacks;
    Snacks.m_Fruit.push_back( new Banana );
    Snacks.m_Fruit.push_back( new Apple );
    Snacks.m_Fruit.push_back( new Orange );

    if ( Snacks.HasFruit<Orange>() )
    {
        std::cout << "There is an orange available";
    }
}

Answer 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>

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

2 个答案: