3分钟教你用原生js实现具有进度监听的文件上传预览组件

徐小夕 等级 601 0 0

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

组件设计架构如下:

3分钟教你用原生js实现具有进度监听的文件上传预览组件

涉及的核心知识点如下:

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

github地址

用原生js实现具有进度监听的文件上传预览组件

Demo演示

3分钟教你用原生js实现具有进度监听的文件上传预览组件

3分钟教你用原生js实现具有进度监听的文件上传预览组件

3分钟教你用原生js实现具有进度监听的文件上传预览组件

3分钟教你用原生js实现具有进度监听的文件上传预览组件

使用:

<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>

css代码:

.xj-wrap {
            position: relative;
            display: inline-block;
            border: 1px dashed #888;
            width: 200px;
            height: 200px;
            border-radius: 6px;
            overflow: hidden;
        }
        .xj-wrap::before {
            content: '+';
            font-size: 36px;
            position: absolute;
            transform: translate(-50%, -50%);
            left: 50%;
            top: 50%;
            color: #ccc;
        }
        .xj-wrap .xj-pre-img {
            width: 100%;
            height: 100%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 100%;
        }
        .xj-file {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

js代码:

(function(win, doc){
    function xjFile(opt) {
        var defaultOption = {
            el: doc.body,
            accept: '*', // 格式按照'image/jpg,image/gif'传
            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) }
        };

        // 获取dom
        if(opt.el) {
            opt.el = typeof opt.el === 'object' ? opt.el : document.querySelector(opt.el);
        }

        this.opt = minix(defaultOption, opt);
        this.value = '';
        this.init();
    }

    xjFile.prototype.init = function() {
        this.render();
        this.watch();
    }

    xjFile.prototype.render = function() {
        var fragment = document.createDocumentFragment(),
            file = document.createElement('input'),
            imgBox = document.createElement('div');
        file.type = 'file';
        file.accept = this.opt.accept || '*';
        file.className = 'xj-file';
        imgBox.className = 'xj-pre-img';
        // 插入fragment
        fragment.appendChild(file);
        fragment.appendChild(imgBox);
        // 给包裹组件设置class
        this.opt.el.className = this.opt.clsName;
        this.opt.el.appendChild(fragment);
    }

    xjFile.prototype.watch = function() {
        var ipt = this.opt.el.querySelector('.xj-file');
        var _this = this;
        ipt.addEventListener('change', (e) => {
            var file = ipt.files[0];

            // 给组件赋值
            _this.value = file;

            var fileReader = new FileReader();

            // 读取文件开始时触发
            fileReader.onloadstart = function(e) {
                if(_this.opt.accept !== '*' && _this.opt.accept.indexOf(file.type.toLowerCase()) === -1) {
                    fileReader.abort();
                    _this.opt.beforeUpload(file, e);
                    console.error('文件格式有误', file.type.toLowerCase());
                }
            }

            // 读取完成触发的事件
            fileReader.onload = (e) => {
                var imgBox = this.opt.el.querySelector('.xj-pre-img');
                if(isImage(file.type)) {
                    imgBox.innerHTML = '';
                    imgBox.style.backgroundImage = 'url(' + fileReader.result + ')';
                } else {
                    imgBox.innerHTML = fileReader.result;
                }

                imgBox.title = file.name;

                this.opt.onLoad(e);
            }

            // 文件读取出错事件
            fileReader.onerror = (e) => {
                this.opt.onError(e);
            }

            // 文件读取进度事件
            fileReader.onprogress = (e) => {
                this.opt.onProgress(e);
            }

            isImage(file.type) ? fileReader.readAsDataURL(file) : fileReader.readAsText(file);

        }, false);
    }

    // 清除ipt和组件的值,支持链式调用
    xjFile.prototype.clearFile = function() {
        this.opt.el.querySelector('.xj-file').value = '';
        this.value = '';
        return this
    }

    // 简单对象混合
    function minix(source, target) {
        for(var key in target) {
            source[key] = target[key];
        }
        return source
    }

    // 检测图片类型
    function isImage(type) {
        var reg = /(image\/jpeg|image\/jpg|image\/gif|image\/png)/gi;
        return reg.test(type)
    }

    // 将方法挂载到window上
    win.xjFile = xjFile;

})(window, document);

class版(后期规划)

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

class XjFile {
    constructor(opt) {

    }

    init() {

    }

    watch() {

    }

    render() {

    }

    clearFile() {

    }

    minix(source, target) {

    }

    isImage(type) {

    }
}

总结

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

更多推荐

最后,更多技术优质文章,技术资料,欢迎关注《趣谈前端》

收藏
评论区

相关推荐

项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生
CSS禁用鼠标拖拽选中内容
chrome  -webkit-user-select:none firxfox  -moz-user-select:none IE需要使用JS的onSelected事件了。 JS代码             dom.style.MozUserSelect = 'none';//fixrox禁止选择的JS脚本             dom.st
JS
[在线预览](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fjsfiddle.net%2F1010543618%2Ffyf913t0%2F) 使用《Web API 接口》的《MutationObserver》 [MutationObserver](https://www.oschina.
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
1、webpack入门例子。
在下面的例子中,简单使用webpack打包一个js。并且把这个js引用的其他js、json数据一起打包进去。 官网:[http://webpack.github.io/](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwebpack.github.io%2F) 英文文档:  [http
Android与H5交互 原理与对比
[原文:  https://www.jianshu.com/p/345f4d8a5cfa](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fwww.jianshu.com%2Fp%2F345f4d8a5cfa) 1.Android调用JS的方法有2种:  -----------------
D3.js 力导向图的显示优化(二)
> 摘要: 在本文中,我们将借助 D3.js 的灵活性这一优势,去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能:Nebula Graph 图探索的删除节点和缩放功能。 > 文章首发于 Nebula Graph 官博:[https://nebula-graph.com.cn/posts/d3-js-examples-for-advaned-u
Echarts全国地图二级钻取
<html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/echarts-all-3.js"></script> <script src="js/china.js"></script> </h
JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) ========================== 一、总结 ---- ### 一句话总结:php中文网我可以好好走一波 二、JS前端图形化插件之利器Gojs组件 -------------------- 参考: JS前端图形化插件之利器Gojs组件-js教程-PHP中文网 http://
JavaScaript学习笔记第(一)
js由三部分组成,分别是ECMAScript、DOM、BOM 其中ECMAScript规定了js的语法 js是一门解释型语言、脚本语言、动态类型语言、基于对象语言 书写js代码和CSS一样,有三个书写的地方,第一个是使用<script>标签,再<sccript>标签中书写js代码,标签一般都在body标签中的末尾,第二个地方是书写再结构里,html标签
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass 、React.createElement、Component 首选看一下在浏览器的下面写法: <div id="app"> </div> <script src="../js/react.js"></script> <scr
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"