教你3分钟利用原生js实现有进度监听的文件上传预览组件-创新互联

前言

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计、成都网站设计、大石桥网络推广、小程序开发、大石桥网络营销、大石桥企业策划、大石桥品牌公关、搜索引擎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演示

使用：

<div id="test"></div>
<script src="./js/xjFile.js"></script>
<script>
 new xjFile({
  el: '#test', // 不填则直接默认挂在body上
  accept: 'image/png', // 可选
  clsName: 'xj-wrap', // 可选
  beforeUpload: function(e) { console.log(e) }, // 可选
  onProgress: function(e) { console.log(e) }, // 可选
  onLoad: function(e) { console.log(e) }, // 可选
  onError: function(e) { console.error('文件读取错误', e) } // 可选
 });
</script>

文章名称：教你3分钟利用原生js实现有进度监听的文件上传预览组件-创新互联
本文地址：https://www.cdcxhl.com/article48/dejdhp.html

成都网站建设公司_创新互联，为您提供虚拟主机、网页设计公司、做网站、企业网站制作、网站排名、App设计

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联