问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

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

头像
baiyygynui888
    85827151196
    <input id="fileInput" type="file" ref="file" multiple="multiple" />

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

    谢谢高手。

    javascriptinputmultiple-select
    阅读 14.4k
    4 个回答
    得票最新
    头像
    慕少艾
      3.5k369
      ✓ 已被采纳
      <!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>
      头像
      rossroma
        20552843

        可以试试Web Uploader

        头像
        Showonne
          2.8k103647

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

          头像
          baiyygynui888
            85827151196
            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>
        );
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题