使用input多个文件上传，怎么获取选择的文件？并把这些文件放在页面上显示

<input id="fileInput" type="file" ref="file" multiple="multiple" />

使用multiple可以多个文件选择.但是怎么获致到这些文件的文件名，大小等这些信息，并把它们显示在页面上？

谢谢高手。

getFile(){
        //获取文件集
        let test = document.querySelector('input[type="file"]').files;

        let str = [];

        if(test){
            let img = document.getElementById('img');
            for(let i = 0, len = test.length;i< len;i++){
                    console.log(test[i]);
                str.push(<li className="file_item">
                            <div className="file_img"></div>
                            <div className="file_info"><span>名称: {test[i].name}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>大小：{(test[i].size/1024).toFixed(1)} KB</span></div>
                        </li>);
                console.log(str);
            }
        }
        this.setState({
            str: str
        });

    }

const addBtn = (
            <div>
                <input id="fileInput" type="file" ref="file" multiple="multiple" onChange={this.getFile.bind(this)}/>
                <ul id="img" className="imgContainer">{this.state.str}</ul>
            </div>
        );

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <input type="file" multiple="multiple" id="test">
    <ul id='content'></ul>
</body>
<script>
var test = document.getElementById('test');
test.addEventListener('change', function() {
    var t_files = this.files;
    console.log(t_files);
    var str = '';
    for (var i = 0, len = t_files.length; i < len; i++) {
        console.log(t_files[i]);
        str += '<li>名称：' + t_files[i].name + '大小' + t_files[i].size / 1024 + 'KB</li>';
    };
    document.getElementById('content').innerHTML = str;
}, false);
</script>

</html>

document.querySelector('input[type="file"]').files可以获取到Filelist对象，每个File对象包括了一些文件的基本信息，信息能够拿到，怎么显示就看你自己怎么处理了。

可以试试Web Uploader

【热门文章】