input文件上传控制,即时预览ES6实现

最新推荐文章于 2023-08-22 09:28:12 发布

Museions

最新推荐文章于 2023-08-22 09:28:12 发布

阅读量1.2k

点赞数

分类专栏：大前端开发文章标签： ES6 JAVASCRIPT

本文解决了你的问题吗？转载注明链接,帮助更多人。

本文链接：https://blog.csdn.net/museions/article/details/75675651

版权

大前端开发专栏收录该内容

157 篇文章 7 订阅

订阅专栏

需要三个元素来呈现效果：#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>