前言

本文主要介绍如何使用原生js以面向对象的方式实现文件上传预览组件。该组件使用FileReader在前端实现文件解析、预览、读取进度等功能，并公开相应的api以满足用户自定义需求，如文件上传、进度监控、自定义样式、读取成功回调等。

组件设计架构如下：

涉及的核心知识点如下：

闭包：减少变量污染缩短变量搜索范围自执行函数文件API:读取、解析、监控文件事件DocumentFragment API:主要用于优化dom操作minix:用于实现对象混合正则表达式：匹配文件类型类：类组件的github地址

用原生js实现带有进度监控的文件上传预览组件(本地下载)

演示演示

使用：

Div id=' test'/div脚本src=' http:/js/xjfile . js '/script script new xjfile({ El 3360 ' # test '，//如果没有填写，默认直接挂在车身上接受： 'image/png '。//选择clsName: 'xj-wrap '，//选择beforeupload 3360函数(e) {console.log (e)}，//选择onprogress :函数(e) {console.log (e)}，//可选onload :函数(e) {console.log (e)}，//可选onerror 3360函数(e) {console.error('文件读取错误'，e)} //可选})；/scriptcss代码：xj-wrap { position:相对；display:内联块；border: 1px虚线# 888；宽度： 200 px；高度： 200 px；border-radius : 6px；飞越：隐藏；} .{ content : }之前的XJ-wrap :font-size : 36px；绝对位置：transform: translate(-50%，-50%)；左侧：50%；top : 50%；color: # ccc} .xj包装。XJ-预img { width : 100%；高度： 100%；背景-重复：不重复；背景-位置：中心；背景尺寸： 100%；} .XJ-file { position : absolute；left : 0；right : 0；bottom : 0；top : 0；opa city 3360 0；cursor:指针；}js代码：

（函数(win，doc){ 0函数xjFile(opt){ var默认选项={ El : doc。正文，accept: '*，//格式按照'图像/jpg，图像/gif '传clsName: 'xj-wrap '，上传前：函数{ console.log(e) }，onProgress:函数{ console.log(e) }，onLoad:函数(e) { console.log(e) }，onError:函数{ console.error('文件读取错误，e)} }；//获取DOM if(可选。El){ opt。El=type的类型。El===' object '？选择。El :文件。queryselector(opt。El)；} this.opt=minix(defaultOption，opt)；这个.值=这个。init()；} xjfile。原型。init=function(){ this。render()；这个。watch()；} xjfile。原型。render=function(){ var fragment=document。createdocumentfragment()，file=document。createelement(' input ')，imgBox=document。create element(' div ')；file.type=' filefile。接受=这个。选择。接受| | ' * '；文件。类名=' XJ-文件'；imgbox。类名=' XJ-img前'；//插入fragment.appendChild(文件);碎片。append child(IMgbox)；//给包裹组件设置把这个分类。选择。埃尔。类名=这个。选择。cls名称；this.opt.el.appendChild(片段);} xjfile。原型。watch=function(){ var ipt=this。选择。埃尔。queryselector(' .XJ-文件')；var _ this=this ipt . addeventlistener(' change '，(e)={ var file=ipt。文件[0]；//给组件赋值_ this.value=filevar文件读取器=new文件读取器()；//读取文件开始时触发文件阅读器。onloadstart=function(e){ if(_ this。选择。接受！==' * _ this。选择。接受。(文件的索引。打字。tolowercase())===-1){ FileReader。abort()；_this.opt.beforeUpload(文件，e)；console.error(")文件格式有误，文件。打字。tolowercase())；} } //读取完成触发的事件文件阅读器。onload=(e)={ var imgBox=this。选择。埃尔。' queryselector '。XJ预img ')；if(isi图像(文件。type)){ imgbox。innerhtml=imgbox。风格。背景图像=' URL(' FileReader。结果')'；} else { imgbox。innerhtml=FileReader。结果；} IMgbox。title=文件。姓名；这个。选择。on LoAd(e)；} //文件读取出错事件文件阅读器。onerror=(e)={ this。选择。one rror(e)；} //文件读取进度事件文件阅读器。onprogress=(e)={ this。选择。on progress(e)；} isi图像(文件。类型)？fileReader.readAsDataURL(文件): fileReader.readAsText(文件);}，false)；} //清除人际心理治疗和组件的值，支持链式调用xjfile。原型。clearfile=function(){ this。选择。埃尔。queryselector(' .xj文件').值=' ';this.value=返回此} //简单对象混合函数minix(源，目标){ for(目标中的定义变量键){ source[key]=target[key]；}返回来源} //检测图片类型函数isi image(type){ var reg=/(image /JPEG | image /jpg | image /gif | image /png)/gi；return reg.test(type) } //将方法挂载到窗户上win.xjFile=xjFile})(窗口、文档);班级版（后期规划)

班级版的也很简单，大致框架如下，感兴趣的朋友可以实现一下呦~

类XjFile {构造函数(opt){ } init(){ } watch(){ } render(){ } clearFile(){ } minix(源，目标){ } isImage(类型){ }}总结

该组件仍有需要完善的地方，在后期使用中，会慢慢更新，优化，欢迎大家提出宝贵的建议。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。