主要给大家介绍了关于如何3分钟利用原生js实现有进度监听的文件上传预览组件的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

前言 本文主要介绍如何使用原生js，通过面向对象的方式实现一个文件上传预览的组件，该组件利用FileReader来实现文件在前端的解析，预览，读取进度等功能，并对外暴露相应api来实现用户自定义的需求，比如文件上传，进度监听，自定义样式，读取成功回调等。 组件设计架构如下： 涉及的核心知识点如下： 闭包：减少变量污染，缩短变量查找范围 自执行函数 file API：对文件进行读取，解析，监控文件事件 DocumentFragment API：主要用来优化dom操作 min