需要三个元素来呈现效果:#renPic,.fileName, .fileSize
<script>
document.querySelector('#fileToUpload').onchange = function(){
const upLoad = new ReadFile(this);
}
class ReadFile{
constructor(obj){
this.file = obj.files[0];
this.fil = obj.files;
this.upload();
}
upload(){
this.file?this.getFile():"";
for(let i=0;i<this.fil.length;i++){
this.reads(this.fil[i]);
}
}
reads(file){
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = ()=>
{
let renPic = document.getElementById("renPic");
renPic.innerHTML = "<img src='"+reader.result+"'>";
};
}
getFile(){
let fileSize;
if (this.file.size > 1024 * 1024)
fileSize = (Math.round(this.file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(this.file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = '文件名称: ' + this.file.name;
document.getElementById('fileSize').innerHTML = '文件大小: ' + fileSize;
}
}
</script>