javascript - 使用input多个文件上传，怎么获取选择的文件？并把这些文件放在页面上显示
<input id="fileInput" type="file" ref="file" multiple="multiple" />使用multiple可以多个文件选择.但是怎么获致到这些文件的文件名，大小等这些信息，并把它们显示在页面上？
谢谢高手。
Maison > Questions et réponses > le corps du texte
<input id="fileInput" type="file" ref="file" multiple="multiple" />使用multiple可以多个文件选择.但是怎么获致到这些文件的文件名，大小等这些信息，并把它们显示在页面上？
谢谢高手。
PHP中文网2017-04-11 10:44:04
<!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>
PHP中文网2017-04-11 10:44:04
document.querySelector('input[type="file"]').files可以获取到Filelist对象，每个File对象包括了一些文件的基本信息，信息能够拿到，怎么显示就看你自己怎么处理了。
大家讲道理2017-04-11 10:44:04
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>
);