Загрузить файлы и показать их на веб-странице с помощью React - PullRequest
Новая
       58

Загрузить файлы и показать их на веб-странице с помощью React

0 голосов
/ 24 апреля 2020

Я пытаюсь загрузить текстовые файлы, используя React , и показать эти файлы или имена файлов перед пользователем, чтобы дать ему разрешение на изменение файла или его удаление. Это мое: 

 import React from "react";

class Browse extends React.Component
{

state =  {selectedFile:[] , textFile: []};

//fileChangedHandler  Method
fileChangedHandler =event => {        
 for(var i=0;i<event.target.files.length;i++){         
       this.state.fileees =event.target.files;
       this.setState({selectedFile: event.target.files[i]})

    this.setState((state) => {
        const textFile=[...state.textFile,state.selectedFile.name];
        return {
          textFile,
        };
    });

  }  //for
  } //fileChangedHandler

 render(){
    return(
        <div className="Browse">
                <label for="myfile">Insert DNA Files:</label>
                <input type="file" onChange={this.fileChangedHandler} id="myfile" name="myfile" multiple/>                  
                <div>
                  {this.state.selectedFile.name}
                </div>
        </div>
    );
}

} //class


export default Browse;

Очень хорошо работает, если я загружаю один файл, я вижу имя файла, но это не работает, если я загружаю несколько файлов. Мне нужна помощь в решении этой проблемы, , почему, если я загружаю более одного файла, я не могу показать их на веб-странице пользователя

Спасибо.

1 Ответ

1 голос
/ 25 апреля 2020

Привет Пожалуйста, проверьте этот пример. Здесь я загрузил несколько файлов и показал имена файлов на странице. 

import React from "react";

export default class FIleUploadExample extends React.Component {

    state = {
        files: []
    };

    fileUpload = (e) => {
        this.setState({files: [...e.target.files]});
    };

    render() {
        return (
            <div>
                <span>File Upload</span>
                <input type="file" multiple="multiple" id="file" onChange={this.fileUpload}/>
                <ul>
                    {
                        this.state.files.map((file, i) => <li key={i}>{file.name}</li>)
                    }
                </ul>
            </div>
        );
    }
}
...