<input id="fileInput" type="file" ref="file" multiple="multiple" />
使用multiple可以多个文件选择.但是怎么获致到这些文件的文件名，大小等这些信息，并把它们显示在页面上？
谢谢高手。
小伙看你根骨奇佳，潜力无限，来学PHP伐。
<!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>
可以试试Web Uploader
document.querySelector('input[type="file"]').files可以获取到Filelist对象，每个File对象包括了一些文件的基本信息，信息能够拿到，怎么显示就看你自己怎么处理了。
document.querySelector('input[type="file"]').files
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> <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> );
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
可以试试Web Uploader
document.querySelector('input[type="file"]').files可以获取到Filelist对象，每个File对象包括了一些文件的基本信息，信息能够拿到，怎么显示就看你自己怎么处理了。