本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应的api来实现用户自定义的需求,比如文件上,传进度监听,自定义样式,读取成功回调等。
组件设计架构如下:
涉及的核心知识点如下:
<李>闭包:减少变量污染,缩短变量查找范围李
<李>自执行函数
<李>文件API:对文件进行读取,解析,监控文件事件
<李> DocumentFragment API:主要用来优化dom操作李
<李> minix:用来实现对象混合李
<李>正则表达式:匹配文件类型李
<李>类:类组件
<强> github地址
用原生js实现具有进度监听的文件上传预览组件,(本地下载)
& lt; div id=安馐浴弊４? lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/js/xjFile.js "祝辞& lt;/script>
& lt; script>
新xjFile ({
el:“#测试',//不填则直接默认挂在身体上
接受:“图像/png ',//可选
clsName:“xj-wrap ',//可选
beforeUpload:函数(e) {console.log (e)},//可?
.xj-wrap {
位置:相对;
显示:inline-block;
边界:1 px冲# 888;
宽度:200 px;
身高:200 px;
border - radius: 6 px;
溢出:隐藏;
}
{前.xj-wrap::
内容:“+”;
字体大小:36 px;
位置:绝对的;
变换:翻译(-50%,-50%);
左:50%;
上图:50%;
颜色:# ccc;
}
.xj-wrap .xj-pre-img {
宽度:100%;
高度:100%;
平铺方式:不再重演;
背景位置:中心中心;
background-size: 100%;
}
.xj-file {
位置:绝对的;
左:0;
右:0;
底部:0;
上图:0;
透明度:0;
光标:指针;
}
js代码:
(函数(赢,doc) {
函数xjFile(选择){
var defaultOption={
艾尔:doc.body,
接受:‘*’,//格式按照“图像/jpg, gif图像/贝?
clsName:“xj-wrap”,
beforeUpload:函数(e) {console.log (e)},>
类XjFile {
构造函数(选择){
}
init () {
}
看(){
}
呈现(){
}
clearFile () {
}
minix(源、目标){
}
isImage(类型){
}
}
该组件仍有需要完善的地方,在后期使用中,会慢慢更新、优化,欢迎大家提出宝贵的建议。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。
