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

发布于 2022-09-02 19:45:00 字数 174 浏览 19 评论 0

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

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

谢谢高手。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

-黛色若梦 2022-09-09 19:45:00
<!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>
云胡 2022-09-09 19:45:00

可以试试Web Uploader

终止放荡 2022-09-09 19:45:00

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

沫雨熙 2022-09-09 19:45:00
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>    <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>
        );
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文