前言

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站设计、大石桥网络推广、小程序开发、大石桥网络营销、大石桥企业策划、大石桥品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联公司为所有大学生创业者提供大石桥建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

本文主要介绍如何使用原生js，通过面向对象的方式实现一个文件上传预览的组件，该组件利用FileReader来实现文件在前端的解析，预览，读取进度等功能，并对外暴露相应api来实现用户自定义的需求，比如文件上传，进度监听，自定义样式，读取成功回调等。

组件设计架构如下：

涉及的核心知识点如下：

1. 闭包：减少变量污染，缩短变量查找范围
2. 自执行函数
3. file API：对文件进行读取，解析，监控文件事件
4. DocumentFragment API：主要用来优化dom操作
5. minix ：用来实现对象混合
6. 正则表达式：匹配文件类型
7. class ：类组件

github地址

用原生js实现具有进度监听的文件上传预览组件 （本地下载）

Demo演示

使用：

名称栏目：教你3分钟利用原生js实现有进度监听的文件上传预览组件-创新互联
网站URL：http://azwzsj.com/article/dejdhp.html