简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 使用input多个文件上传，怎么获取选择的文件？并把这些文件放在页面上显示
伊谢尔伦
伊谢尔伦 2017-04-11 10:42:04
0
4
558
<input id="fileInput" type="file" ref="file" multiple="multiple" />

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

谢谢高手。

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

reply all(4)
洪涛
洪涛2017-04-11 10:44:04 4 floor 
<!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>
Like +0
Add Reply
黄舟
黄舟2017-04-11 10:44:04 3 floor

可以试试Web Uploader

Like +0
Add Reply
Ty80
Ty802017-04-11 10:44:04 2 floor

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

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 10:44:04 1 floor 
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">
                            <p className="file_img"></p>
                            <p className="file_info"><span>名称: {test[i].name}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>大小：{(test[i].size/1024).toFixed(1)} KB</span></p>
                        </li>);
                console.log(str);
            }
        }
        this.setState({
            str: str
        });

    }
const addBtn = (
            <p>
                <input id="fileInput" type="file" ref="file" multiple="multiple" onChange={this.getFile.bind(this)}/>
                <ul id="img" className="imgContainer">{this.state.str}</ul>
            </p>
        );
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！